Why I am getting "Cannot set property 'src' of null" error?

Question

I make a select menu in HTML and when you change your selection in the list, it changes the src of an image. I keep getting the error: "Cannot set property 'src' of null" in the console and the image doesn't appear. Here is the code:

  var panelOneType;

  function gfsPanelOne() {
    panelOneType = "gfs";
  }

  function cmcPanelOne() {
    panelOneType = "cmc";
  }

  function navgemPanelOne() {
    panelOneType = "navgem";
  }

  function nam12kmPanelOne() {
    panelOneType = "nam12km";
  }

  function nam4kmPanelOne() {
    panelOneType = "nam4km";
  }

  function wrfarwPanelOne() {
    panelOneType = "wrf-arw";
  }

  function wrfnmmPanelOne() {
    panelOneType = "wrf-nmm";
  }

  function rgemPanelOne() {
    panelOneType = "rgem";
  }

  document.getElementById("panel1").src = "http://www.tropicaltidbits.com/analysis/models/" + panelOneType + "/2016062712/" + panelOneType + "_mslp_pcpn_frzn_us_1.png";

<select name="panel-1" class="model-select">
  <option value="gfs" onchange="gfsPanel1()">GFS</option>
  <option value="cmc" onchange="cmcPanel1()">CMC</option>
  <option value="navgem" onchange="navgemPanel1()">NAVGEM</option>
  <option value="nam-12km" onchange="nam12kmPanel1()">NAM 12km</option>
  <option value="nam-4km" onchange="nam4kmPanel1()">NAM 4km</option>
  <option value="wrf-arw" onchange="wrfarwPanel1()">WRF-ARW</option>
  <option value="wrf-nmm" onchange="wrfnmmPanel1()">WRF-NMM</option>
  <option value="rgem" onchange="rgemPanel1()">RGEM</option>
</select>

<img class="model-image" id="panel1" src="" />

Anyone know why I'm getting this error and how to fix it?

@CapitanFindus - there's an `img` element below that with the ID — tymeJV, Jun 29 '16 at 12:38
It's because your code that sets the `src` is not inside the handlers. It runs immediately when the document loads. The only thing that will run `onchange` is whatever is actually inside the event handler function. — , Jun 29 '16 at 12:40
I suspect your JavaScript is inline in the `` and not run on page load or anything? Thuis means it will try to set the `src` before the `img` element exists. You need to be running this whenever `panelOneType` changes anyway, so in the functions (which by the way are named wrongly in the HTML) — Rhumborl, Jun 29 '16 at 12:40

score 1 · Accepted Answer · answered Jun 29 '16 at 12:50

You need to define onefunction and call it on the select "onchange"

try this:

  function changeImage(){
 var panelOneType = document.getElementById('selectedvalue').value;
 console.info(panelOneType);
 document.getElementById("panel1").src = "http://www.tropicaltidbits.com/analysis/models/" + panelOneType + "/2016062712/" + panelOneType + "_mslp_pcpn_frzn_us_1.png";
}

<select name="panel-1" id="selectedvalue" class="model-select" onchange="changeImage();">
  <option value="gfs" >GFS</option>
  <option value="cmc" >CMC</option>
  <option value="navgem" >NAVGEM</option>
  <option value="nam-12km" >NAM 12km</option>
  <option value="nam-4km" >NAM 4km</option>
  <option value="wrf-arw" >WRF-ARW</option>
  <option value="wrf-nmm" >WRF-NMM</option>
  <option value="rgem" >RGEM</option>
</select>

<img class="model-image" id="panel1" src="" />

score 0 · Answer 2 · answered Jun 29 '16 at 12:58

As Rhumborl commented on your question the most likely situation here is that you are loading the javascript without considering if the html already rendered or not, this will surely work if you trigger it on document ready state if you use jquery or if document.readyState == 'complete' or you could do this:

    document.addEventListener("DOMContentLoaded", function(event) { 
    //Do work
    });

Why I am getting "Cannot set property 'src' of null" error?

2 Answers2