.innerHTML：无法将属性“innerHTML”设置为 null

Question

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

感谢您的帮助，希望这不是由于诸如拼写错误之类的愚蠢问题。

Answer 1

这里有一些问题。

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标签更改为：

body onload="myFunc()">

Answer 2

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