无法读取 null 的属性（读取 'value'）

Question

我正在尝试获取输入数字字段的值，但 returns 我遇到了上述错误。

HTML: <label for="number1">Enter the First number :</label> <input type="number" value="0" id="fornum1">

JavaScript: var num1 = document.getElementById("fornum1").value;

该网站的重点是创建一个使用按钮在输入字段上显示输出的基本计算器。

var num1;
var num2;
var answer;

num1 = document.getElementById("fornum1").value;
num2 = document.getElementById("fornum2").value;

console.log(num1)

function addition() {
  answer = num1 + num2;
  document.getElementById("sum").value = answer;
}

function subtraction() {
  answer = num1 - num2;
  document.getElementById("minus").value = answer;
}

function multiplication() {
  answer = num1 * num2;
  document.getElementById("product").value = answer;
}

function division() {
  answer = num1 / num2;
  document.getElementById("divs").value = answer;
}

#div1 {
  height: 300px;
  width: 500px;
  background-color: plum;
  margin: auto;
  padding: 5%;
}

body {
  font-family: Courier;
}

label {
  width: 300px;
  display: inline-block;
}

#div2 input {
  width: 120px;
}

<script src="myscripts.js"></script>
<div id="div1">
  <p style="text-align: center;">FOUR BASIC OPERATIONS</p>

  <label for="number1">Enter the First number :</label>
  <input type="number" value="0" id="fornum1">
  <br><br>

  <label for="number2">Enter the Second number:</label>
  <input type="number" value="0" id="fornum2">
  <br><br><br><br>

  <div align="center" id="div2">
    <button type="button" onclick="addition()">Add</button>
    <input type="text" id="sum" readonly>
    <button type="button">Subtraction </button>
    <input type="text" id="minus" onclick="subtraction()" readonly>
    <br><br><br>

    <button type="button">Multiplication</button>
    <input type="text" id="product" onclick="multiplication()" readonly>
    <button type="button">Division</button>
    <input type="text" id="divs" onclick="division()" readonly>
  </div>


</div>

Answer 1

首先，正如@mplungjan 在评论中所建议的那样，将 script:src 移动到 </body> 标记之后。接下来，您在脚本的开头声明 num1 和 num2，这意味着如果输入的值发生变化，程序仍会将 num1 和 num2 设置为 0。所以您需要做的就是单击按钮时，再次检查输入的值以进行更改。最后，检查输入值 returns 是一个字符串，而不是您希望在计算器中使用的数字。因此，您需要做的就是使用 ParseInt.

将字符串转换为数字

var num1;
var num2;
var answer;

num1 = document.getElementById("fornum1").value;
num2 = document.getElementById("fornum2").value;

function addition() {
    num1 = document.getElementById("fornum1").value;
    num2 = document.getElementById("fornum2").value;
    num1 = parseInt(num1)
    num2 = parseInt(num2)
    answer = num1 + num2;
    document.getElementById("sum").value = answer;
}

function subtraction() {
    num1 = document.getElementById("fornum1").value;
    num2 = document.getElementById("fornum2").value;
    num1 = parseInt(num1)
    num2 = parseInt(num2)
    answer = num1 - num2;
    document.getElementById("minus").value = answer;
}

function multiplication() {
    num1 = document.getElementById("fornum1").value;
    num2 = document.getElementById("fornum2").value;
    num1 = parseInt(num1)
    num2 = parseInt(num2)
    answer = num1 * num2;
    document.getElementById("product").value = answer;
}

function division() {
    num1 = document.getElementById("fornum1").value;
    num2 = document.getElementById("fornum2").value;
    num1 = parseInt(num1)
    num2 = parseInt(num2)
    answer = num1 / num2;
    document.getElementById("divs").value = answer;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Four Basic Operators</title>
        <style>
            #div1 {
                height: 300px;
                width: 500px;
                background-color: plum;
                margin: auto;
                padding: 5%;
            }
            body {
                font-family: Courier;
            }
            label {
                width: 300px;
                display: inline-block;
            }
            #div2 input {
                width: 120px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <p style="text-align: center;">FOUR BASIC OPERATIONS</p>
            
            <label for="number1">Enter the First number :</label>
            <input type="number" value="0" id="fornum1">
            <br><br>

            <label for="number2">Enter the Second number:</label>
            <input type="number" value="0" id="fornum2">
            <br><br><br><br>

            <div align="center" id="div2">
                <button type="button" onclick="addition()">Add</button>
                <input type="text" id="sum" readonly>
                <button type="button" >Subtraction </button>
                <input type="text" id="minus" onclick="subtraction()" readonly>
                <br><br><br>

                <button type="button">Multiplication</button>
                <input type="text" id="product" onclick="multiplication()" readonly>
                <button type="button">Division</button>
                <input type="text" id="divs" onclick="division()" readonly>
            </div>
           
            
        </div>
    </body>
        <script src="script.js"></script>
</html>

Answer 2

TLDR：

<script defer src="myscripts.js" defer/>

或

window.addEventListener("DOMContentLoaded", () => {/\*code here\*/}

当您的浏览器尝试解析您编写的 HTML 时，它会从上到下读取它。

它首先读取的是您的脚本标签。因此，您的浏览器会提取脚本，然后运行立即发送它。然后它继续解析文件的其余部分。但是因为您的脚本运行马上您的输入元素还没有被加载。

这个问题有 2 个好的解决方案和 1 个不好的解决方案：

解决方案 1：

将 defer 属性添加到您的脚本标签。 defer 标签会告诉你的浏览器不要阻止解析你的 html.

<script src="myscripts.js" defer></script>

more documentation on the defer tag here

解决方案 2：

与其立即创建脚本运行，不如让脚本在页面加载完成时创建一个侦听器，并让侦听器调用您的脚本

window.addEventListener("DOMContentLoaded", () => {
    let value = document.getElementById("fornum1").value;
    console.log(value);
}

关于支持旧版浏览器的快速说明：您还可以将 document.onload 属性设置为匿名函数，但如果您这样做，您应该首先检查它是否已经定义，并确保在您的函数之后调用现有函数（如果已经存在）叫做。避免这种情况，因为这是不好的做法。

方案三：（不好的）

如果出于某种原因您不想使用以太网方法，您可以随时更改标签的顺序，使脚本标签位于文档的末尾。但是你应该避免这种情况，因为你的脚本标签通常应该在文档的 <head> 中。

最后，您应该尝试使用选项 1，因为它包含得最好，并让您的代码仅作为您的代码存在，不加任何糖分，以使其在浏览器中很好地发挥作用。它还会在页面加载事件被触发之前获得运行，因此如果由于某种原因您在页面加载时触发了其他内容，则此代码将在此之前获得运行。

无法读取 null 的属性（读取 'value'）

Cannot read properties of null (reading 'value')

html

javascript

input