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

但内联事件处理程序本质上是 HTML 标记内的 eval - 它们是不好的做法，会导致分解不良、难以管理的代码。认真考虑使用 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>