为什么我收到“无法设置属性 'src' of null”错误？答案

【问题标题】：Why I am getting "Cannot set property 'src' of null" error?为什么我收到“无法设置属性 'src' of null”错误？
【发布时间】：2016-11-01 04:10:18
【问题描述】：

我在 HTML 中创建了一个选择菜单，当您更改列表中的选择时，它会更改图像的 src。我不断收到错误消息：“无法在控制台中设置属性 '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="" />

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

【问题讨论】：

@CapitanFindus - 在其下方有一个img 元素，ID 为
这是因为设置src 的代码不在处理程序中。它在文档加载时立即运行。唯一会运行 onchange 的是事件处理函数内部的任何内容。
我怀疑你的 JavaScript 是内联在 <head> 中的，而不是在页面加载时运行或其他什么？ Thuis 意味着它将在 img 元素存在之前尝试设置 src。无论何时 panelOneType 发生变化，您都需要运行它，因此在函数中（顺便说一下，在 HTML 中命名错误）
“onchange”在“option”中起作用？？

标签： javascript html src

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你需要定义一个函数并在选择“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="" />

【讨论】：