未捕获的类型错误：无法设置 null 的属性“src”...选择您自己的冒险答案

【问题标题】：Uncaught TypeError: Cannot set property 'src' of null...Choose your own adventure未捕获的类型错误：无法设置 null 的属性“src”...选择您自己的冒险
【发布时间】：2014-09-25 19:21:18
【问题描述】：

我只是在学习 javascript，但遇到了一些麻烦。我正在选择你自己的冒险游戏，你会在其中穿过迷宫。有图片告诉你发生了什么。在您做出每个决定后，图片都会发生变化。输入左侧或右侧后，我在更改图片时遇到问题。每次尝试加载图片时，我都会收到 Uncaught TypeError: Cannot set property 'src' of null 错误消息。 Java 说问题出现在第 66 行

这是我的代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Brian.Bosco-Hazey Maze Adventure</title>
<script type="application/javascript">
var flag;
var output;
var name;
var n1 = "what is your name?"
var s1 = "You wake up in a spooky maze. You must find your way out or this place will become your grave. You can go <b>Left</b> or <b>Right</b>?";
var s2 = "You come across a wizard at a fork in the maze. He gives you a magic sword to defend yourself with. You can either go <b>Left</b> or <b>Right</b>?";
var e1 = "You encounter a monster. you attempt to escape, but it pounces on you and tears off your flesh. You have died. GAME OVER. Type restart to try again";
var e2 = "You come across a dead end, looks like you have to go back the way you came. When you turn around you step on a trap on the floor and the whole tunnel collapses on you. You did not survive. Please type restart to try again."
var e3 = "While walking down this long hallway, you come across a giant monster guarding the exit door. You take the sword the wizard gave you and you slay the beast. You go through the door and exit the maze. Congradulations you have beaten the game! Type restart to play again. ";
var done = "What are you doing? You are still dead. Type restart to start again";
var myImage;
var newImage;





function init(){
	output = document.getElementById('output');
	output.innerHTML="";
	flag="n1";
	texter(n1);
	name = "";
	document.body.style.background="white";
}
function texter(newText){
	console.log(newText+" from texter");
	var oldText = document.getElementById('output').innerHTML;
	document.getElementById('output').innerHTML= newText;//+" "+oldText;
}
function Imger(newImage){
	document.getElementById('img1').src = newImage;
	document.getElementById('img2').src = newImage;

}
function game(){
	var input = document.getElementById('input').value;
	console.log("the input is "+input);
	if(input=="restart"){
		init();
	}else{
		if(flag=="n1"){
			name = input;
			flag="s1";
			texter("hello "+name+" "+s1);
			document.getElementById('img1').src = "hooded man.jpg";
			output.style.color="blue";
		}else if(flag=="s1"){
			//ask c1
			if(input=="right"){
				flag="s2";
				texter(s2);

				
					
				document.body.style.background="green";
			}else if(input=="left"){
				texter(e1);
				flag ="e1";
				document.getElementById('img2').src = "last scene.jpg";
			
			}else{
				texter("error");
			}
		}else if(flag=="s2"){
			//ask c2
			if(input=="right"){
				flag="e2";
				texter(e2);
				
				document.body.style.background="red";
			}else if(input=="left"){
				texter(e3);
				flag ="e3";
				document.body.style.background="yellow";
			}else{
				texter("error");
			}
		}else if(flag=="e1"){
			//e1
			texter(done);
		}else if(flag=="e2"){
			//e2
			texter(done);
		}else if(flag=="e3"){
			//e3
			texter(done);
		}
	}
}
</script>
</head>
<body onLoad="init()">
<img src="start.jpg" id="img1" width="500" height="500">


<p id="output">this is the start text</p>
<input type="text" id="input">
<input type="button" value="submit" onClick="game()" ">
</body>
</html>

【问题讨论】：

你使用了getElementById('img2')，但你没有任何id为img2的元素

标签： javascript null src

【解决方案1】：

document.getElementById('img2').src = newImage;

HTML 中没有id="img2"，所以是document.getElementById('img2') == null。

可以在img1下加一个：

<img src="start.jpg" id="img1" width="500" height="500">
<img src="start.jpg" id="img2" width="500" height="500">

或者你可以删除 JS 行：

document.getElementById('img2').src = newImage;

还有：

document.getElementById('img2').src = "last scene.jpg";

或者改成：

document.getElementById('img1').src = "last scene.jpg";

【讨论】：

好的。那么我到底该如何定义img2呢？
也许在 img1 之后？
当我把它所做的就是把图片放在第一张图片旁边，但我不希望它这样做。我需要把图片换成另一个
那么你只使用getElementById('img1').src，因为那是你想要改变的图像
你做了什么，你有什么（检查你的开发控制台）？

【解决方案2】：

虽然我不会有太多帮助，因为 3 年前该脚本实际上应该在 img 之后提出这个问题，而 img 应该在它后面，而不是它应该可以工作。我会说您没有 img2 的 id，但有人已经指出了这一点，如果他的建议不起作用，请执行我的建议。

【讨论】：

【解决方案3】：

我遇到了同样的问题，我只是喜欢这样做并工作：

function Imger(newImage){
 document.getElementById('img1').src = newImage;
 if(document.getElementById('img2') != NULL){
  document.getElementById('img2').src = newImage;
 }
}

如果不是 NULL 就使用它。

if(image != NULL){
 image.src = 'image url';
}

【讨论】：