CODEWITHSUNDEEP
javascript
J D
J D

Reputation: 127

Clearing values in a Javascript/HTML calculator

Why won't my calculator clear when I press "c" or "="?

<form name='calculator'>
  <table>
    <tr>
      <td colspan='4'>
        <input type='text' name='display' id='display' disabled>
      </td>
    </tr>
    <tr>
      <td><input type='button' name='one' value='1' onclick="calculator.display.value += '1'"></td>

      <td><input type='button' name='two' value='2' onclick="calculator.display.value += '2'"></td>

      <td><input type='button' name='three' value='3' onclick="calculator.display.value += '3'"></td>

      <td><input type='button' class='operator' name='plus' value='+' onclick="calculator.display.value += '+'"></td>
    </tr>
    <tr>
      <td><input type='button' name='four' value='4' onclick="calculator.display.value += '4'"></td>

      <td><input type='button' name='five' value='5' onclick="calculator.display.value += '5'"></td>

      <td><input type='button' name='six' value='6' onclick="calculator.display.value += '6'"></td>

      <td><input type='button' name='minus' value='-' onclick="calculator.display.value += '-'"></td>
    </tr>
    <tr>
      <td><input type='button' name='seven' value='7' onclick="calculator.display.value += '7'"></td>

      <td><input type='button' name='eight' value='8' onclick="claculator.display.value += '8'"></td>

      <td><input type='button' name='nine' value='9' onclick="calculator.display.value += '9'"></td>

      <td><input type='button' name='equals' value='=' onclick="calculator.display.value += eval(calculator.display.value)"></td>

      <td><input type='button' id='clear' name='clear' value='c' onclick="calculator.display.value += ' '"></td>
    </tr>
  </table>
</form>

Upvotes: 1

Views: 522

Answers (3)

Muhammad Salman
Muhammad Salman

Reputation: 445

What you are doing wrong is basically this :

<td><input type='button' name='equals' value='=' onclick="calculator.display.value += eval(calculator.display.value)"></td>

<td><input type='button' id='clear' name='clear' value='c' onclick="calculator.display.value += ' '"></td>

In both these cases you are adding to the current value.

The result and clear button should not add the value they should set it equal to something so this becomes :

<td><input type='button' name='equals' value='=' onclick="calculator.display.value = eval(calculator.display.value)"></td>

<td><input type='button' id='clear' name='clear' value='c' onclick="calculator.display.value = ' '"></td>

All I did was remove two chars and they were + in calculator.display.value

You were using calculator.display.value += I changed it to calculator.display.value =

Upvotes: 0

thingEvery
thingEvery

Reputation: 3434

You're adding the answer onto the end of the problem with +=. Just get rid of the +

Like this:

<td><input type='button' name='equals' value='=' onclick="calculator.display.value = eval(calculator.display.value)"></td>

See here: https://jsfiddle.net/odqjg5md/

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 371019

+= concatenates the existing value with your string. If you want to clear the value (or set it to something brand-new), you should use = instead.

<form name='calculator'>
  <table>
    <tr>
      <td colspan='4'>
        <input type='text' name='display' id='display' disabled>
      </td>
    </tr>
    <tr>
      <td><input type='button' name='one' value='1' onclick="calculator.display.value += '1'"></td>
      <td><input type='button' name='two' value='2' onclick="calculator.display.value += '2'"></td>
      <td><input type='button' name='three' value='3' onclick="calculator.display.value += '3'"></td>
      <td><input type='button' class='operator' name='plus' value='+' onclick="calculator.display.value += '+'"></td>
    </tr>
    <tr>
      <td><input type='button' name='four' value='4' onclick="calculator.display.value += '4'"></td>
      <td><input type='button' name='five' value='5' onclick="calculator.display.value += '5'"></td>
      <td><input type='button' name='six' value='6' onclick="calculator.display.value += '6'"></td>
      <td><input type='button' name='minus' value='-' onclick="calculator.display.value += '-'"></td>
    </tr>
    <tr>
      <td><input type='button' name='seven' value='7' onclick="calculator.display.value += '7'"></td>
      <td><input type='button' name='eight' value='8' onclick="claculator.display.value += '8'"></td>
      <td><input type='button' name='nine' value='9' onclick="calculator.display.value += '9'"></td>
      <td><input type='button' name='equals' value='=' onclick="calculator.display.value = eval(calculator.display.value)"></td>
      <td><input type='button' id='clear' name='clear' value='c' onclick="calculator.display.value = ' '"></td>
    </tr>
  </table>

</form>

But inline event handlers are essentially eval inside HTML markup - they're bad practice and result in poorly factored, hard-to-manage code. Seriously consider attaching your events with JavaScript, instead. For example, for those last two buttons:

const equals = document.querySelector('[name="equals"]');
const clear = document.querySelector('#clear');
equals.onclick = () => calculator.display.value = eval(calculator.display.value);
clear.onclick = () => calculator.display.value = '';
    <form name='calculator'>
      <table>
        <tr>
          <td colspan='4'>
            <input type='text' name='display' id='display' disabled>
          </td>
        </tr>
        <tr>
          <td><input type='button' name='one' value='1' onclick="calculator.display.value += '1'"></td>
          <td><input type='button' name='two' value='2' onclick="calculator.display.value += '2'"></td>
          <td><input type='button' name='three' value='3' onclick="calculator.display.value += '3'"></td>
          <td><input type='button' class='operator' name='plus' value='+' onclick="calculator.display.value += '+'"></td>
        </tr>
        <tr>
          <td><input type='button' name='four' value='4' onclick="calculator.display.value += '4'"></td>
          <td><input type='button' name='five' value='5' onclick="calculator.display.value += '5'"></td>
          <td><input type='button' name='six' value='6' onclick="calculator.display.value += '6'"></td>
          <td><input type='button' name='minus' value='-' onclick="calculator.display.value += '-'"></td>
        </tr>
        <tr>
          <td><input type='button' name='seven' value='7' onclick="calculator.display.value += '7'"></td>
          <td><input type='button' name='eight' value='8' onclick="claculator.display.value += '8'"></td>
          <td><input type='button' name='nine' value='9' onclick="calculator.display.value += '9'"></td>
          <td><input type='button' name='equals' value='='></td>
          <td><input type='button' id='clear' name='clear' value='c'></td>
        </tr>
      </table>

    </form>

Upvotes: 4

Related Questions