为什么我收到 "Cannot set property 'src' of null" 错误？

Question

我在 HTML 中创建了一个 select 菜单，当您在列表中更改 selection 时，它会更改图像的 src。我不断收到错误："Cannot set property 'src' of null" 在控制台中并且图像没有出现。这是代码：

  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="" />

有人知道我为什么会收到此错误以及如何解决它吗？

Answer 1

您需要定义一个函数并在 select "onchange"

上调用它

试试这个：

  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="" />

Answer 2

正如 Rhumborl 对你的问题所评论的那样，这里最有可能的情况是你正在加载 javascript 而没有考虑 html 是否已经呈现，如果你触发它肯定会起作用如果您使用 jquery 或 document.readyState == 'complete' 或您可以这样做，请记录就绪状态：

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

为什么我收到 "Cannot set property 'src' of null" 错误？

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

html

javascript

src