Uncaught :无法读取null - html复选框的属性“选中”复选框切换

Question

一旦选中复选框，尝试运行一个函数时，我会收到一个错误。每次尝试运行该错误时，都会出现上述错误。这是代码：

HTML：

<body>
    <header>
        <div class="header_container">
            <h1>Trivia Quiz</h1>
            <p>Welcome to the Trivia Quiz 2020!</p>
            <p>The aim of the game is to get as many questions correct as possible!<br> The topics range from film to geography, so good luck!</p>
            <div class="header_settings" id="header_settings">
                <input type="checkbox" id="checkbox" onclick="TimeToggle()">
                <label for="TimeToggle">Time Limit</label><br>
                <input type="text" id="Timer" name="Timer" placeholder="Seconds" id="header_input">
            </div>
            <button>Start</button>
        </div>
    </header>
</body>

和Javascript (存储在外部，链接在HTML文档的头上)：

var header_input = document.getElementById("header_input");
var header_settings = document.getElementById("header_settings");
var checkbox = document.getElementById("checkbox");

function TimeToggle() {
    if (checkbox.checked) {
        header_settings.style.height = "3%";
        setTimeout(function () {
            header_input.style.display = "none";
        }, 500);
    } else {
        header_settings.style.height = "10%";
        setTimeout(function () {
            header_input.style.display = "block";
        }, 500);
    }
}

该代码旨在切换名为"header_settings“的div的高度，并根据是否选中复选框来设置名为"header_input”的输入。

我很想知道这是怎么回事，我已经试过很多了。谢谢:)

Answer 1

这就是你想做的吗？您可以使用onchange函数，并将this作为argument传递，并在切换函数中检查输入是否已选中或未选中。

另外，您的输入中有两个id选择器，这是不可能的。

此外，请确保您的scripts.js是在</body>结束标记之前添加的。

将此代码添加为HTML输入

<input type="checkbox" id="checkbox" onchange="TimeToggle(this)">

现场工作演示：

​

function TimeToggle(el) {
  var header_input = document.getElementById("header_input");
  var header_settings = document.getElementById("header_settings");
  var checkbox = document.getElementById("checkbox");
  if (el.checked) {
    header_settings.style.height = '50px';
    setTimeout(function() {
      header_input.style.display = "none";
    }, 500);
  } else {
    header_settings.style.height = '100px';
    setTimeout(function() {
      header_input.style.display = "block";
    }, 500);
  }
}

<body>
  <header>
    <div class="header_container">
      <h1>Trivia Quiz</h1>
      <p>Welcome to the Trivia Quiz 2020!</p>
      <p>The aim of the game is to get as many questions correct as possible!<br> The topics range from film to geography, so good luck!</p>
      <div class="header_settings" id="header_settings">
        <input type="checkbox" id="checkbox" onchange="TimeToggle(this)">
        <label for="TimeToggle">Time Limit</label><br>
        <input type="text" name="Timer" placeholder="Seconds" id="header_input">
      </div>
      <button>Start</button>
    </div>
  </header>
</body>

​

Answer 2

你的问题很常见。您正在尝试在DOM加载之前使用document.get...获取html元素。您需要在窗口的onload侦听器中包装这些文档获取：

let checkbox;
window.onload = function() {
  checkbox = document.getElementById();
};

function TimeToggle() {//...}

Answer 3

将外部JS放在末尾。就在</body>之前。你的问题就会解决。

有点像

<body>
<!--Your HTML content here-->
<script src = "External Js.js"></script>
</body>