JavaScript 计算器按钮在按下时不响应（按钮不会在计算器屏幕上写入其值）答案

【问题标题】：JavaScript Calculator buttons don't respond (buttons don't write their value on the calculator's screen) when they are pressedJavaScript 计算器按钮在按下时不响应（按钮不会在计算器屏幕上写入其值）
【发布时间】：2021-08-15 14:03:15
【问题描述】：

我试图使用 JavaScript 制作一个计算器，但是当我点击任何按钮时，我没有得到任何响应（这些按钮不会在计算器的屏幕上写下它们的值）我的文本编辑器（与代码）没有显示任何错误，但是当我从浏览器检查它时，它显示了这个错误：

Uncaught TypeError: Cannot read property 'value' of null
at index.html:29

我不明白该错误是什么或如何修复它

我的代码：

var num1 = document.getElementById("1");
var num2 = document.getElementById("2");
var num3 = document.getElementById("3");
var num4 = document.getElementById("4");
var num5 = document.getElementById("5");
var num6 = document.getElementById("6");
var num7 = document.getElementById("7");
var num8 = document.getElementById("8");
var num9 = document.getElementById("9");
var num0 = document.getElementById("0");
var dot = document.getElementById("dot");
var clear = document.getElementById("resetbtn");
var calculatebtn = document.getElementById("calculatebtn");
var screen = document.getElementById("screen");
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");
var multiply = document.getElementById("multiply");
var divide = document.getElementById("divide");
num1.onclick = screen.value += 1;
num2.onclick = screen.value += 2;
num3.onclick = screen.value += 3;
num4.onclick = screen.value += 4;
num5.onclick = screen.value += 5;
num6.onclick = screen.value += 6;
num7.onclick = screen.value += 7;
num8.onclick = screen.value += 8;
num9.onclick = screen.value += 9;
num0.onclick = screen.value += 0;
dot.onclick = screen.value += ".";
clear.onclick = screen.value = "";
calculatebtn.onclick = eval(screen.value);
plus.onclick = screen.value += "+";
minus.onclick = screen.value += "-";
multiply.onclick = screen.value += "*";
divide.onclick = screen.value += "/";

<table border="0" cellpadding="10px" cellspacing="30px;">
  <br /><br />
  <tr>
    <td>
      <input style="width: 99%;background-color:transparent;font-size:60px;text-align:center" id="screen" />
    </td>
  </tr>
  <tr>
    <td>
      <button style="color: red;" id="resetbtn">C</button>
      <button id="plus" style="width: 15%;color:orange">+</button>
      <button id="minus" style="width: 15%;color:orange">-</button>
      <button style="width: 15%;;color:orange" id="multiply">x</button>
      <button id="divide" style="width: 15%;;color:orange">÷</button>
    </td>
  </tr>
  <tr>
    <td>
      <button id="1">1</button> <button id="2">2</button>
      <button id="3">3</button> <button id="4">4</button>
      <button id="5">5</button>
    </td>
  </tr>

  <tr>
    <td>
      <button id="6">6</button> <button id="7">7</button>
      <button id="8">8</button> <button id="9">9</button>
      <button id="0">0</button>
    </td>
  </tr>

  <tr>
    <td>
      <button id="dot">.</button>
      <button style="width: 70%;color:seagreen" id="calculatebtn">=</button>
    </td>
  </tr>
</table>

【问题讨论】：

标签： javascript html calculator

【解决方案1】：

您收到错误 Uncaught TypeError: Cannot read property 'value' of null，因为您的一个或多个选择器无法从加载的元素中找到匹配项

您可以通过将代码包含在 window.onload 事件侦听器中来解决此问题，如下所示：

window.addEventListener('load', () => {
    ... the rest of your javascript here.
});

或者在加载内容后将脚本标签移动到body 的底部：

<body>
... html code here
<script src="./yourfile.js"></script>
</body>

即使您已修复此问题，您的代码仍会因为您使用 .onclick 而引发错误。 .onclick 属性必须是可以在每次单击元素时调用的函数。所以使用vim我改变了每次出现的情况：

num1.onclick = screen.value += 1;

到这里：

num1.onclick = () => (screen.value += 1);

完整代码如下：

var num1 = document.getElementById("1");
var num2 = document.getElementById("2");
var num3 = document.getElementById("3");
var num4 = document.getElementById("4");
var num5 = document.getElementById("5");
var num6 = document.getElementById("6");
var num7 = document.getElementById("7");
var num8 = document.getElementById("8");
var num9 = document.getElementById("9");
var num0 = document.getElementById("0");
var dot = document.getElementById("dot");
var clear = document.getElementById("resetbtn");
var calculatebtn = document.getElementById("calculatebtn");
var screen = document.getElementById("screen");
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");
var multiply = document.getElementById("multiply");
var divide = document.getElementById("divide");

num1.onclick = () => (screen.value += 1);
num2.onclick = () => (screen.value += 2);
num3.onclick = () => (screen.value += 3);
num4.onclick = () => (screen.value += 4);
num5.onclick = () => (screen.value += 5);
num6.onclick = () => (screen.value += 6);
num7.onclick = () => (screen.value += 7);
num8.onclick = () => (screen.value += 8);
num9.onclick = () => (screen.value += 9);
num0.onclick = () => (screen.value += 0);
dot.onclick = () => (screen.value += ".");
clear.onclick = () => (screen.value = "");
calculatebtn.onclick = () => (screen.value = eval(screen.value));
plus.onclick = () => (screen.value += "+");
minus.onclick = () => (screen.value += "-");
multiply.onclick = () => (screen.value += "*");
divide.onclick = () => (screen.value += "/");

<table border="0" cellpadding="10px" cellspacing="30px;">
  <br /><br />
  <tr>
    <td>
      <input style="width: 99%;background-color:transparent;font-size:60px;text-align:center" id="screen" />
    </td>
  </tr>
  <tr>
    <td>
      <button style="color: red;" id="resetbtn">C</button>
      <button id="plus" style="width: 15%;color:orange">+</button>
      <button id="minus" style="width: 15%;color:orange">-</button>
      <button style="width: 15%;;color:orange" id="multiply">x</button>
      <button id="divide" style="width: 15%;;color:orange">÷</button>
    </td>
  </tr>
  <tr>
    <td>
      <button id="1">1</button> <button id="2">2</button>
      <button id="3">3</button> <button id="4">4</button>
      <button id="5">5</button>
    </td>
  </tr>

  <tr>
    <td>
      <button id="6">6</button> <button id="7">7</button>
      <button id="8">8</button> <button id="9">9</button>
      <button id="0">0</button>
    </td>
  </tr>

  <tr>
    <td>
      <button id="dot">.</button>
      <button style="width: 70%;color:seagreen" id="calculatebtn">=</button>
    </td>
  </tr>
</table>

【讨论】：

我会尝试很多，但是 () => 是什么意思？只是为了知识
@OmarMostafaAbubakr () => 是 arrow function 的一部分，它是完整函数表达式的简写。
好的，谢谢，除了calculatebtn在点击时不计算之外，一切正常：'(