Question

我的代码比较两个数组并显示两个数组中的项目。我可以将其成功打印到控制台上以转换段落，这证明更具挑战性。

未捕获的TypeError：无法将属性'innerHTML'设置为null 在compareArrays（pen.js：25）在HTMLButtonElement.onclick（index.html？key = iFrameKey-ae252606-6389-a594-b844-2cecca064c7d：20） compareArrays @ pen.js：25 onclick @ index.html？key = iFrameKey-ae252606-6389-a594-b844-2cecca064c7d：20

我了解我必须使用innerHTML方法，但不确定我的错误含义

<button id="search" onclick="compareArrays()" required>Search</button>
<p id="results"></p>

function compareArrays () {
  // Interate the first array
  for (var i = 0; i < restaurantsOne.length; i++) {
    // Iterate the second array 
    for (var j = 0; j < restaurantsTwo.length; j++){
      // Compare the two arrays
      if (restaurantsOne[i] == restaurantsTwo[j]){
        // console.log(restaurantsOne[i]);
        // Show results in paragraph
        document.getElementById("#results").innerHTML = restaurantsOne[i] 

      }
    }
  }
 }

最终，我希望将两个数组中的每个项目RestaurantsOne [i]打印到新段落。

Answer 1

我认为这是因为您的document.getElementById。

应该是这样

    document.getElementById("results").innerHTML = restaurantsOne[i]

（无＃）

＃可以与document.querySelector method

一起使用

Answer 2

脚本运行时DOM不存在，因此找不到元素。

将脚本移到HTML页面的底部：

  <script>...</script>
</body>

或将其全部包装在onload侦听器中：

window.onload = function() {
  // All your code
};

还请注意，您的ID很可能不包含#-您可能没有或想要这样做：

<p id="#results"></p>

将其删除：

document.getElementById("results")

或使用querySelector：

document.querySelector("#results")

如何解决“未捕获的TypeError：无法将属性'innerHTML'设置为null”

2 个答案: