未捕获的类型错误:无法设置属性'src'为null的..选择你自己的冒险
Uncaught TypeError: Cannot set property 'src' of null...Choose your own adventure
我只是在学习javascript,遇到了一些麻烦。我正在制作一款你自己选择的冒险游戏,让你穿过迷宫。有一些图片向你展示正在发生的事情。这些图片会在你做出每一个决定后发生变化。我在向左或向右输入后更改图片时遇到问题。我一直得到Uncaught TypeError:无法在每次尝试加载图片时设置null错误消息的属性"src"。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>
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";
我也遇到了同样的问题,我只是这样做了:
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';
}
尽管我不会有太多帮助,因为3年前有人问我这个问题,脚本实际上应该在img之后,img应该在它后面,而且它应该可能工作。我想说,你没有img2的id,但有人已经指出了这一点,如果他的建议不起作用,那就执行我的建议。
相关文章:
- 下拉选择可自动更改第二个下拉选择
- 如何使用jQuery选择下拉列表的值
- 获取 HTML 5 音频控制文件位置并在不使用 id 选择器的情况下更新 src
- 通过选择框“选项”更改 Iframe SRC
- 在选择IMG SRC并在文本字段中显示时出现问题
- 加载 Iframe src,并从水平下拉菜单中进行选择
- jQuery src 选择器问题
- 选择具有特定 src 且没有 alt 标记的所有图像元素
- 如何选择所有具有带有一些特定 src 的儿童图像的 Div
- 如何根据图像的src来选择alt
- 未捕获的类型错误:无法设置属性'src'为null的..选择你自己的冒险
- 函数在iframe之间进行选择.SRC和frame.contentwindow.location
- Javascript img.从HTML中选择SRC
- 表单:选择设置img src
- 如何根据选择框中的选项值更改视频的src值
- 使用JQuery更改SRC的选择
- 如何使用jQuery通过src属性选择iframe
- 使用获得未定义值的$('img[src$=“变量中的图像源结束字符串”;]')选择图像
- 更改CSS样式表src on更改选择框
- 使用javascript为iframe SRC选择菜单