.innerHTML: Cannot set property 'innerHTML' of null

Question

First, I am completely new to coding and have been using self-teaching tools to learn Javascript in my free time. I've learned enough to start building my own projects. My first attempt is to build a randomizer (in this case, random restaurant names). The Javascript works through my tests in the console as do the buttons. However, I cannot seem to get the .innerHTML to work and I'm not sure what I'm missing. I've done several searches here and none of the solutions I've found seem to be working.

The error I'm getting is listed in the title and it is appearing at line 29.

Here is 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];
});

And here is my 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>

Thanks for your help and hopefully it's not due to something stupid like a typo.

probably your h2 element is missing the id attribute.

Navoneel Talukdar
– Navoneel Talukdar

2016-06-04 14:32:01 +00:00
Commented Jun 4, 2016 at 14:32 — Navoneel Talukdar
– Navoneel Talukdar, Commented Jun 4, 2016 at 14:32

Or May-Paz · Accepted Answer · 2016-06-04 14:34:34Z

2

There are some problems here.

the h2 tag id should be
```
  <h2 id="restaurantNameDisplay"></h2>
```

your buttons are set on the same variable name, change the second to

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

If it's still not working, you should call your script after the page load event. so insert your javascript code to a function (e.g. "myFunc()") and change your html body tag to:

body onload="myFunc()">

answered Jun 4, 2016 at 14:34

Or May-Paz

363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Riadan414 Over a year ago

Thanks! I'll take a look and appreciate the assist!

apieceofbart · Accepted Answer · 2016-06-04 14:28:59Z

1

Most probably this line <h2="restaurantNameDisplay"></h2="restaurantNameDisplay"> should be <h2 id="restaurantNameDisplay"></h2>

answered Jun 4, 2016 at 14:28

apieceofbart

2,2074 gold badges25 silver badges37 bronze badges

2 Comments

Riadan414 Over a year ago

Lesson learned: double-check and make sure that all your tags are properly named. :) It's always a silly mistake with me! Thank you. :)

apieceofbart Over a year ago

no worries, we all make those..also check the other answer as there are probably more issues with the code. good luck!

Collectives™ on Stack Overflow

.innerHTML: Cannot set property 'innerHTML' of null

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related