Question 238825 in Html Question posted in
Some basic documentation can be found here.

Html – Why is the 'C' button in my web-based calculator adding to the equation?

So I just realized that I’m not that good when it comes to front-end development, so I decided to make a calculator app using only front-end.

All was going smoothly until I got to the part of actually making the buttons of my calculator do something. So I got to work and made a condition that if the clicked button was equal to the ‘C’ button (in case you don’t know, the ‘C’ button clears the calculator), then it would delete everything from the equation which is a read-only input tag. But this condition seems to not work because when I enter the ‘C’ button it actually adds to the input tag and not clear it.

Here’s my code:

const buttons = document.getElementById('buttons')
const input_field = document.querySelector('input[type="text"]') as HTMLInputElement

buttons?.addEventListener('click', function(event) {
  const clicked_button = event.target as HTMLElement
  if (clicked_button.tagName === 'BUTTON') {
    if (clicked_button.textContent === 'C') {
      input_field.value = ''
    } 
    else {
      input_field.value += clicked_button.textContent
    }
  }
})
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
  <link rel="stylesheet" href="styles.css">
  <title> Calculator </title>
</head>
<body>
  <main class="container">
    <h1> Calculator </h1>
    <input type="text" readonly>
    <div id="buttons">
      <button> 7 </button>
      <button> 8 </button>
      <button> 9 </button>
      <button id="eraser"> C </button>

      <button> 4 </button>
      <button> 5 </button>
      <button> 6 </button>
      <button class="calculation"> + </button>

      <button> 1 </button>
      <button> 2 </button>
      <button> 3 </button>
      <button class="calculation"> - </button>

      <button> 0 </button>
      <button class="calculation"> * </button>
      <button class="calculation"> ÷ </button>
      <button class="calculation"> % </button>
    </div>
  </main>
  <script src="scripts.js"> </script>
</body>
</html>

By the way, yes, I have tsc’d my Typescript file.

Tags:

2

Answers


  1. 0

    I think the textContent value is going to be " C " with a space on both sides. I would either add the space to the evaluation by doing clicked_button.textContent === ' C ' or trim it by doing clicked_button.textContent.trim() === 'C'.

    Login or Signup to reply.
  2. 0

    The somewhat wrong thing you do is trying to use element text content as some sensefull value

    I see you are a beginner, so go the easiest route there is – in-HTML handlers:

    // You don't have to place them into object, but if you have a lot of stuff you'd better to do (or to use a class)
const calculator = {
  input: document.querySelector('#calc-in'),
  output: document.querySelector('#calc-out'),
  click(num) {
    this.input.value += num.toString();
    this.update();
  },
  op(op) {
    this.input.value += op.toString();
    this.update();
  },
  clear() {
    this.input.value = '';
    this.update();
  },
  update() {
    try {
      // don't use eval it's unsafe 
      this.output.value = eval(this.input.value || '0').toString()
    } catch(err) {
      this.output.value = err.toString()
    }
  }
};
    <h1> Calculator </h1>
<input id="calc-in" type="text" readonly> =
<input id="calc-out" type="text" readonly>
<div id="buttons">
  <button onclick="calculator.click(7)"> 7 </button>
  <button onclick="calculator.click(8)"> 8 </button>
  <button onclick="calculator.click(9)"> 9 </button>
  <button onclick="calculator.clear()" id="eraser"> C </button>
  <br>
  
  <button onclick="calculator.click(4)"> 4 </button>
  <button onclick="calculator.click(5)"> 5 </button>
  <button onclick="calculator.click(6)"> 6 </button>
  <button onclick="calculator.op('+')" class="calculation"> + </button>
  <br>

  <button onclick="calculator.click(1)"> 1 </button>
  <button onclick="calculator.click(2)"> 2 </button>
  <button onclick="calculator.click(3)"> 3 </button>
  <button onclick="calculator.op('-')" class="calculation"> - </button>
  <br>

  <button onclick="calculator.click(0)"> 0 </button>
  <button onclick="calculator.op('*')" class="calculation"> * </button>
  <button onclick="calculator.op('/')" class="calculation"> ÷ </button>
  <button onclick="calculator.op('%')" class="calculation"> % </button>
</div>

    If you actuallu do need some data in HTML, use data-attributes

    <button data-my-value="9999"> x </button>

let value = button.dataset.myValue // "9999" string
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search