开发者问题收集

如何修复“未捕获的类型错误:无法将属性‘innerHTML’设置为 null”

2019-07-03
97

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

未捕获的 TypeError:无法设置 null 的属性“innerHTML” 在 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],即在两个数组中都打印到新段落。

2个回答

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

应该是这样的

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

(没有 #)

# 可以与 document.querySelector 方法

一起使用
Guillaume M
2019-07-03

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

将脚本移至 HTML 页面底部:

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

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

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

另请注意,您的 ID 很可能不包含 # - 您可能没有或不想要这个:

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

将其删除:

document.getElementById("results")

或使用 querySelector

document.querySelector("#results")
Jack Bashford
2019-07-03