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

这里有一些问题。

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

body onload =“myFunc（）”＆gt;

Answer 2

最有可能是这一行<h2="restaurantNameDisplay"></h2="restaurantNameDisplay"> <h2 id="restaurantNameDisplay"></h2>

.innerHTML：无法设置null的属性'innerHTML'

2 个答案: