Clearing values in a Javascript/HTML calculator

Question

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> 

Answer 1

+= 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> 

Answer 2

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/

Answer 3

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 =

---