Cannot read property 'appendChild' of null JS

Question

I am having an issue with my JS code.

I keep getting the following error

Uncaught TypeError: Cannot read property 'appendChild' of null

JS Code:

    const weatherIcon = document.getElementById('weather-icon');

    const icon = document.createElement('img');
    icon.setAttribute('id', 'icon');
    icon.src = "http://openweathermap.org/img/w/50n.png";
    console.log(icon);
    weatherIcon.appendChild(icon);    //error is on this line

<div id="weather-data">
          <div id="weather-icon">
              
            </div>
    </div>

This means `weatherIcon` is failing to find the element with ID 'weather-icon'. Probably you're running this code before the DOM has loaded. — Mitya, Dec 18 '18 at 13:37
`#weather-icon` doesn't exist when your JS is executing. `document.getElementById("weather-icon")` is returning `null`. — BenM, Dec 18 '18 at 13:37

score 1 · Answer 1 · answered Dec 18 '18 at 13:38

Probably your script is executing before the DOM fully loaded. Try with DOMContentLoaded. This will ensure that the code inside will be executed only after the DOM is fully loaded.

document.addEventListener('DOMContentLoaded', function(){
  const weatherIcon = document.getElementById('weather-icon');

  const icon = document.createElement('img');
  icon.setAttribute('id', 'icon');
  icon.src = "http://openweathermap.org/img/w/50n.png";
  console.log(icon);
  weatherIcon.appendChild(icon);
});

<div id="weather-data">
  <div id="weather-icon"></div>
</div>

Cannot read property 'appendChild' of null JS

1 Answers1