如何修复“未捕获的类型错误:无法将属性‘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]
(没有 #)
一起使用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