2014-09-25 71 views
1

我只是在學習javascript,我遇到了一些麻煩。我正在做一個選擇你自己的冒險遊戲,你會經歷一個迷宮。有圖片顯示你正在發生什麼。每做出決定後,照片都會改變。在輸入左側或右側後更改圖片時遇到問題。我一直在獲取Uncaught TypeError:每次嘗試加載圖片時都無法設置屬性'src'的空錯誤消息。 Java的說,這個問題是在66號線Uncaught TypeError:無法設置null的屬性'src'...選擇你自己的冒險

這裏存在的是我的代碼:

<!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(){ 
 
\t output = document.getElementById('output'); 
 
\t output.innerHTML=""; 
 
\t flag="n1"; 
 
\t texter(n1); 
 
\t name = ""; 
 
\t document.body.style.background="white"; 
 
} 
 
function texter(newText){ 
 
\t console.log(newText+" from texter"); 
 
\t var oldText = document.getElementById('output').innerHTML; 
 
\t document.getElementById('output').innerHTML= newText;//+" "+oldText; 
 
} 
 
function Imger(newImage){ 
 
\t document.getElementById('img1').src = newImage; 
 
\t document.getElementById('img2').src = newImage; 
 

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

 
\t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t document.body.style.background="green"; 
 
\t \t \t }else if(input=="left"){ 
 
\t \t \t \t texter(e1); 
 
\t \t \t \t flag ="e1"; 
 
\t \t \t \t document.getElementById('img2').src = "last scene.jpg"; 
 
\t \t \t 
 
\t \t \t }else{ 
 
\t \t \t \t texter("error"); 
 
\t \t \t } 
 
\t \t }else if(flag=="s2"){ 
 
\t \t \t //ask c2 
 
\t \t \t if(input=="right"){ 
 
\t \t \t \t flag="e2"; 
 
\t \t \t \t texter(e2); 
 
\t \t \t \t 
 
\t \t \t \t document.body.style.background="red"; 
 
\t \t \t }else if(input=="left"){ 
 
\t \t \t \t texter(e3); 
 
\t \t \t \t flag ="e3"; 
 
\t \t \t \t document.body.style.background="yellow"; 
 
\t \t \t }else{ 
 
\t \t \t \t texter("error"); 
 
\t \t \t } 
 
\t \t }else if(flag=="e1"){ 
 
\t \t \t //e1 
 
\t \t \t texter(done); 
 
\t \t }else if(flag=="e2"){ 
 
\t \t \t //e2 
 
\t \t \t texter(done); 
 
\t \t }else if(flag=="e3"){ 
 
\t \t \t //e3 
 
\t \t \t texter(done); 
 
\t \t } 
 
\t } 
 
} 
 
</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>

+0

你使用'getElementById('img2')'但你沒有任何帶有id的元素'img2' – 2014-09-25 19:25:38

回答

4
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"; 
+0

好的。那麼我如何定義img2? – UltimateLink 2014-09-25 19:34:58

+0

也許在img1之後? – 2014-09-25 19:36:12

+0

當我把 它只是把它放在第一個旁邊,但我不希望它這樣做。我需要將圖片更改爲另一個 – UltimateLink 2014-09-25 19:43:05

相關問題