清除Javascript / HTML计算器中的值

Question

为什么当我按“ c”或“ =”时，计算器不能清除？

 <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

+=将现有值与您的字符串连接在一起 。 如果要清除该值（或将其设置为全新的值），则应使用=代替。

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

但是，内联事件处理程序本质上是eval HTML标记内-他们是不好的做法，并导致不良因素，难以管理的代码。 认真考虑使用JavaScript附加事件。 例如，对于最后两个按钮：

 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

您可以使用+=将答案添加到问题的末尾。 只要摆脱+

像这样：

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

看到这里： https : //jsfiddle.net/odqjg5md/

Answer 3

你做错了基本上是这样的：

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

在这两种情况下，您都将添加到当前值。

结果和清除按钮不应将其应设置为等于的值相加，因此变为：

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

我所做的只是删除两个字符和他们+在calculator.display.value

您正在使用calculator.display.value +=我将其更改为calculator.display.value =

---