I'm just learning javascript and I'm having some trouble. I'm making a choose your own adventure game where you go through a maze. There are pictures showing you what is going on. The pictures will change after each decision you make. I have a problem changing the pictures after typing in left or right. I keep getting Uncaught TypeError: Cannot set property 'src' of null error messages every time it tries to load the picture. Java says that the problem is occuring at Line 66
Here is my code:
<!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 bee your grave. You can go <b>Left</b> or <b>Right</b>?";
var s2 = "You e 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 e 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 e 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>I'm just learning javascript and I'm having some trouble. I'm making a choose your own adventure game where you go through a maze. There are pictures showing you what is going on. The pictures will change after each decision you make. I have a problem changing the pictures after typing in left or right. I keep getting Uncaught TypeError: Cannot set property 'src' of null error messages every time it tries to load the picture. Java says that the problem is occuring at Line 66
Here is my code:
<!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 bee your grave. You can go <b>Left</b> or <b>Right</b>?";
var s2 = "You e 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 e 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 e 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>-
you use
getElementById('img2')but you dont have any element with idimg2– Patrick Evans Commented Sep 25, 2014 at 19:25
3 Answers
Reset to default 7document.getElementById('img2').src = newImage;
There is no id="img2" in the HTML, so document.getElementById('img2') == null.
May you can add one under img1:
<img src="start.jpg" id="img1" width="500" height="500">
<img src="start.jpg" id="img2" width="500" height="500">
OR you can remove the JS line:
document.getElementById('img2').src = newImage;
And also:
document.getElementById('img2').src = "last scene.jpg";
Or change it to:
document.getElementById('img1').src = "last scene.jpg";
I was had same problem and i just did like this and work:
function Imger(newImage){
document.getElementById('img1').src = newImage;
if(document.getElementById('img2') != NULL){
document.getElementById('img2').src = newImage;
}
}
just used if not NULL for it.
if(image != NULL){
image.src = 'image url';
}
although I won't be much help since this was asked 3 years ago by that script should actually be after the img and the img should be behind it and than it should possibly work. I would say that you have no id's of img2 but someone already pointed it out and if his suggestion doesn't work that do my suggestion.