javascript - 无法读取属性，试图让应用程序要求用户输入年龄和姓名

Question

我试图让用户输入姓名和年龄，然后按下按钮提交值。表单接受值，当用户单击提交时，会运行一个函数，该函数从 div1（即欢迎）更改为 div2（即界面）。

const button = document.querySelector("#but");
const errorDiv = document.querySelector("#errorDiv");
button.addEventListener("click", function() {
  errorDiv.style.color = "red";
  errorDiv.style.backgroundColor = "yellow";
  errorDiv.style.textAlign = "center";
  let name = document.querySelector("#name");
  let age = document.querySelector("#age");
  let number = age.value.trim();
  if (number == "") {
    errorDiv.innerHTML = `Sorry, you must enter a value in Age`;
    number.value = "";
  } else {
    if (isNaN(number)) {
      errorDiv.innerHTML = `Sorry, you did not enter a digit`;
      number.value = "";
    } else {
      if (document.getElementById('welcome')) {

        if (document.getElementById('welcome').style.display == 'none') {
          document.getElementById('welcome').style.display = 'block';
          document.getElementById('interface').style.display = 'none';
        } else {
          document.getElementById('welcome').style.display = 'none';
          document.getElementById('interface').style.display = 'block';
        }
      }
    }
  }
});

<div id="welcome">
  <br><br>
  <font size="7" color="white">
    <center>Welcome to Weakest Link</center>
  </font>
  <br><br>
  <font size="5" color="white" face="Times New Roman">
    <form id="details">
      <label>Name:</label><br>
      <input type="text" id="name" required></input><br><br><br>
      <label>Age</label><br>
      <input type="text" id="age" required></input><br>
      <br>
      <input type="button" value="Press me" id="but">
      <br>
      <br>

    </form>
  </font>
  <div id="errorDiv"></div>
</div>

我收到错误，TypeError: Cannot read property 'addEventListener' of null at https://replbox.repl.it/data/web_hosting_1/RohanJuneja/Assignment-3/js/script.js:61:8

我只希望 javascript 接受值并将其保存以用于我以后必须执行的代码。

标签： javascriptcsshtml

Answer 1

您的脚本很可能在您的 HTML 代码加载之前运行。要解决这个问题：

将<script>标签放在结束</body>标签之前：

  <script>/* Scripts */</script>
</body>