gpt4 book ai didi

javascript - .innerHTML : Cannot set property 'innerHTML' of null

转载 作者:行者123 更新时间:2023-11-28 18:32:58 26 4
gpt4 key购买 nike

首先,我对编码完全陌生,并且一直在空闲时间使用自学工具学习 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>

感谢您的帮助,希望这不是由于拼写错误等愚蠢的事情造成的。

最佳答案

这里有一些问题。

  1. h2 标签 ID 应该是

      <h2 id="restaurantNameDisplay"></h2>
  2. 您的按钮设置为相同的变量名称,将第二个更改为

        var refreshRestaurantButton = document.getElementById('refreshRestaurant');
    refreshRestaurantButton.addEventListener('click', function () {
    randomRestaurant.clearRestaurant();
    randomRestaurant.findRestaurant();
    document.getElementById("restaurantNameDisplay").innerHTML = randomRestaurant.restaurantName[0];
    });
  3. 如果它仍然不起作用,您应该在页面加载事件之后调用脚本。因此,将您的 javascript 代码插入到函数中(例如“myFunc()”)并将您的 html 正文标记更改为:

body onload="myFunc()">

关于javascript - .innerHTML : Cannot set property 'innerHTML' of null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37631270/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com