清除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 =

---