开发者问题收集

如何解决错误“无法将属性‘innerHTML’设置为 null”

2021-05-05
91
<html>
<body>
<p>maximum number:<input type="text" id="number"></p>
<p>how many questions?<input type="text" id="questions"></p>
<button onclick="button()"> ok </button>
<div id = 'div'> </div>
<div id = 'div2'> </div>

  <script>
    var rand1, rand2, text1, text2
    function button(){
      text1 = document.getElementById("number").value;
      // text2 = document.getElementById('questions').value;
      rand1 = Math.floor(Math.random() * text1);
      rand2 = Math.floor(Math.random() * text1);
      var html = "<input type='number' id='id'> <button onclick=' check() '> check </button> <button onclick=' again() '> again </button>" + Number(rand2) + '+' + Number(rand1);
      document.getElementById('div').innerHTML = html;
      var text1 = document.getElementById('number').value;
      document.write(html);
    }
    var rand3, rand4
    function again(){
      rand3 = Math.floor(Math.random() * 10);
      rand4 = Math.floor(Math.random() * 10);
      var html1 = Number(rand3) + '+' + Number(rand4);
      document.getElementById('div2').innerHTML = html1;
    }
    function check(){
      var answer = rand1 + rand2;
      var text11 = document.getElementById('id').value;
      if(answer == text11) {
        document.write('<br>' + 'correct!');
      } else {
        document.write('<br>' + 'incorrect!');
      }
    }
  </script>
</body>
</html>

此 JS / HTML 代码应该给出一个像 1 + 1 这样的等式,然后如果我再次单击,我会得到另一个。但这给了我错误 Untitled.html:20 Uncaught TypeError:无法将属性“innerHTML”设置为 null。我已经研究了半个小时,它说我需要将 div 放在脚本前面。但我已经这样做了,它仍然不起作用。我该如何解决这个问题?

3个回答

您需要关闭标签。您的代码无法看到“div2”,因为“div”永远不会关闭。

<div id='div'></div>
<div id='div2'></div>

然后,在您的 again 函数中,您正在调用 document.write ,它不应该在页面加载后使用,因为它会覆盖您已经在页面上拥有的任何内容。它实际上是在删除您的 <div> 标签,然后在您尝试访问它们时导致错误。此外,您已经通过 innerHTML 将该值放在页面上。简而言之:删除 button 函数中的 document.write

Kinglish
2021-05-05

<div id = 'div'> 更改为 <div id="div"></div>

<div id = 'div2'> 更改为 <div id="div2"></div>

Amr
2021-05-05

我刚刚检查了你的代码,它运行正常。 尝试关闭 div 标签

Rakesh
2021-05-05