Question

以下是完整的错误消息：

mlg.html:41 Uncaught TypeError: Cannot set property 'innerHTML' of null
  at ml (mlg.html:41)
  at HTMLButtonElement.onclick (mlg.html:9)

我正在制作一个疯狂的libs游戏，我只是在进行快速测试以找到错误然后我偶然发现了这个问题。这是代码：

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <button type="button" onclick="ml()">Mad Libs!</button>
  <p id="display"></p>

  <script>
    function ml() {
      var x = Math.floor((Math.random() * 10) + 1);

      //mad lib 1
      if (x == 1 || 2) {
        document.write("test1");
      }
      //mad lib 2
      if (x == 3 || 4) {
        document.write("test2");
      }
      //mad lib 3
      if (x == 5 || 6) {
        document.write("test3");
      }
      //mad lib 4
      if (x == 7 || 8) {
        document.write("test4");
      }
      //mad lib 5
      if (x == 9 || 10) {
        document.write("test5");
      }
      document.getElementById("display").innerHTML = x;
    }
  </script>
</body>
</html>

Answer 1

请勿使用document.write，bad practice。它用test1或类似的字符串覆盖整个页面。因此，当达到document.getElementById("display").innerHTML = x;时，将不再存在ID为display的元素，而document.getElementById("display")将评估为null。

如果您要测试if语句，请改用console.log("test1");。只需在大多数浏览器中打开browser console（ F12 ），您就会看到那里的消息。

说到您的if声明：they’re wrong。 if(test == 1 || 2)将始终评估为true，因为2是真实的。那不是你想要的。你想要的是if(test == 1 || test == 2)。

备选方案：if([1, 2].includes(test))，if([1, 2].indexOf(test) >= 0)（Check variable equality against a list of values）。

document.getElementById在document.write之后的现有元素上返回null

1 个答案: