.innerHTML: 无法设置属性 'innerHTML' 为 null

Question

首先，我完全不熟悉编码，并且一直在使用 self-teaching 工具在空闲时间学习 Javascript。我已经学到了足够的知识来开始构建自己的项目。我的第一个尝试是构建一个随机发生器（在本例中是随机餐厅名称）。 Javascript 和按钮一样在控制台中完成我的测试。但是，我似乎无法让 .innerHTML 正常工作，而且我不确定我错过了什么。我在这里进行了几次搜索，发现 none 的解决方案似乎有效。

标题中列出了我遇到的错误，它出现在第 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>

感谢您的帮助，希望这不是因为拼写错误等愚蠢的事情。

Answer 1

这行 <h2="restaurantNameDisplay"></h2="restaurantNameDisplay"> 很可能应该是 <h2 id="restaurantNameDisplay"></h2>

Answer 2

这里有些问题。

h2 标签 ID 应该是
```
  <h2 id="restaurantNameDisplay"></h2>
```

你的按钮设置在同一个变量名上，把第二个改成

    var refreshRestaurantButton = document.getElementById('refreshRestaurant');
    refreshRestaurantButton.addEventListener('click', function () {
        randomRestaurant.clearRestaurant();
        randomRestaurant.findRestaurant();
        document.getElementById("restaurantNameDisplay").innerHTML = randomRestaurant.restaurantName[0];
    });

如果仍然无法正常工作，您应该在页面加载事件之后调用您的脚本。所以将你的 javascript 代码插入一个函数（例如 "myFunc()"）并将你的 html 正文标签更改为：

正文加载="myFunc()">

.innerHTML: 无法设置属性 'innerHTML' 为 null

.innerHTML: Cannot set property 'innerHTML' of null

javascript

innerhtml

.innerHTML: 无法设置 属性 'innerHTML' 为 null

.innerHTML: Cannot set property 'innerHTML' of null

javascript

innerhtml

.innerHTML: 无法设置属性 'innerHTML' 为 null