.innerHTML:无法设置属性'innerHTML‘为null
.innerHTML:无法设置属性'innerHTML‘为null
提问于 2016-06-04 14:17:36
首先，我对编码完全陌生，在业余时间一直在使用自学工具来学习Javascript。我已经学到足够多的东西来开始自己的项目了。我的第一次尝试是构建一个随机化器(在本例中，是随机餐馆名称)。Javascript和按钮一样，可以在控制台中通过我的测试。然而，我似乎无法让.innerHTML工作，我也不知道我错过了什么。我在这里做了几次搜索，我找到的解决方案似乎都没有效果。
我得到的错误列在标题中，出现在第29行。
这是Javascript：
var randomRestaurant = {
restaurantName: [],
findRestaurant: function() {
var restaurantName = Math.random();
if (restaurantName < 0.20) {
this.restaurantName.push("China Taste");
}
else if (restaurantName < 0.40) {
this.restaurantName.push("Pizza Johns");
}
else if (restaurantName < 0.60) {
this.restaurantName.push("Liberatore's");
}
else if (restaurantName < 0.80) {
this.restaurantName.push("Bill Bateman's");
}
else {
this.restaurantName.push("R&R Taqueria");
}
},
clearRestaurant: function() {
randomRestaurant.restaurantName.splice(0, 1);
}
};
var randomRestaurantButton = document.getElementById('randomRestaurantName');
randomRestaurantButton.addEventListener('click', function() {
randomRestaurant.findRestaurant();
document.getElementById("restaurantNameDisplay").innerHTML = randomRestaurant.restaurantName[0]; //<--line 29
});
var randomRestaurantButton = document.getElementById('refreshRestaurant');
randomRestaurantButton.addEventListener('click', function() {
randomRestaurant.clearRestaurant();
randomRestaurant.findRestaurant();
document.getElementById("restaurantNameDisplay").innerHTML = randomRestaurant.restaurantName[0];
});这是我的HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div><h1>Random Restaurant!</h1>
<button id="randomRestaurantName">Click me for a random restaurant!</button>
</div>
<br>
<h2="restaurantNameDisplay"></h2="restaurantNameDisplay">
<div>
<br>
<button id="refreshRestaurant">Nah. Give me another one.</button>
</div>
</body>
<script src="script.js"></script>
</html>谢谢你的帮助，希望这不是因为一些愚蠢的错误。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-04 14:34:34
这里有一些问题。
- h2标记id应该是
- 您的按钮设置在相同的变量名上，将第二个更改为 refreshRestaurantButton.addEventListener('click'，函数() { randomRestaurant.clearRestaurant()；randomRestaurant.findRestaurant()；document.getElementById= randomRestaurant.restaurantName；}；
- 如果它仍然不工作，您应该在页面加载事件之后调用脚本。因此，将javascript代码插入一个函数(例如"myFunc()")，并将html body标记更改为：
车身onload="myFunc()">
Stack Overflow用户
发布于 2016-06-04 14:28:59
很可能这一行<h2="restaurantNameDisplay"></h2="restaurantNameDisplay">应该是<h2 id="restaurantNameDisplay"></h2>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37631270
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号