innerHTML error

Hi I am currently undertaking thechore door project.

For some reason the my innerHTML property is not working in the code. Ive doubled check my code and ran it through ‘Esprima: Syntax Validation’ and there doesn’t seem to be an error.

Can someone look over my code below and highlight the reason why startButton.innerHTML = 'You win! Play again?'; does not seem to be working.

Any help would be much appreciated!

let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');
let startButton = document.getElementById('start'); 

let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";

let beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";

let spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";

let closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg";

let numClosedDoors = 3; 
let openDoor1;
let openDoor2;
let openDoor3;


const isClicked = door => {
  if (door.src === closedDoorPath) {
    return false;
  } else {
    return true; 
  }
}

const playDoor = (door) => {
  numClosedDoors--; 
    if (numClosedDoor === 0) {
      gameOver('win');
    }
  }


const randomChoreDoorGenerator = () => {
	const choreDoor = Math.floor(Math.random() * numClosedDoors);
  if (choreDoor === 0) {
    openDoor1 = botDoorPath;
    openDoor2 = beachDoorPath;
    openDoor3 = spaceDoorPath;
  } else if (choreDoor === 1) {
    openDoor2 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor3 = spaceDoorPath;
  } else { (choreDoor === 2) 
    openDoor3 = botDoorPath; 
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
  }
}

door1.onclick = () => {
  if (!isClicked(doorImage1)) {
    doorImage1.src = openDoor1; 
  	playDoor();
  }
}

door2.onclick = () => {
  if (!isClicked(doorImage2)) {
    doorImage2.src = openDoor2; 
  	playDoor();
  }
}

door3.onclick = () => {
  if (!isClicked(doorImage3)) {
    doorImage3.src = openDoor3; 
  	playDoor();
  }
}


const gameOver = (status) => {
	if (status === 'win') {
  startButton.innerHTML = 'You win! Play 		 again?';
}  
}


randomChoreDoorGenerator();
1 Like

For me, your code is breaking at this line:

door1.onclick = () => {

saying door1 is not defined. I’m not sure, does that work for a clue?

(Maybe not, since the HTML and CSS is missing for me to recreate the whole situation.)

edit#1: nvm the math part, it’s working

edit#2: I don’t think a conditional statement works that way(syntax):

} else { (choreDoor === 2) 
    openDoor3 = botDoorPath; 
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
  }
1 Like

I’m also looking for the solution.

2 Likes

A quick search for “choreDoor” showed me that the door1.onclick instead of doorImage1.onclick issue had been solved before by @mtf

see here: ChoreDoor Prj (Step 45 )

This seems to be a problem here, too.

1 Like

@sframpton01 Have you finished the project or are you only part way through?

1 Like

Thanks,

Hopefully this post will help me get back on track.

1 Like

Hi,

No I haven’t complete the entirety of the project yet. I am midway through but I can’t progress once I’ve sorted the issue as the rest of the tasks are dependent on this section working smoothly.

1 Like

OK. Try making an alert inside the if statement and see if it gets triggered.

1 Like

Hi,

I inputted an alert state inside my if statement and it did not trigger.

door1.onclick = () => {
  if (!isClicked(doorImage1)) {
    doorImage1.src = openDoor1; 
  	playDoor();
    alert("Hello! I am an alert box!!");
  }
}

door2.onclick = () => {
  if (!isClicked(doorImage2)) {
    doorImage2.src = openDoor2; 
  	playDoor();
    alert("Hello! I am an alert box!!");
  }
}

door3.onclick = () => {
  if (!isClicked(doorImage3)) {
    doorImage3.src = openDoor3; 
  	playDoor();
  }
}

I’m guessing my IF statement has something amiss?

Hi,

Here is my HTML, CSS and Javascript code to see if you can spot a mistake.

<!DOCTYPE html>
<html>
  <head>
    <title>Chore Door!</title>
    <link href="./style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div class ="header">
      <img src= "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg">
    </div>
    
    <div class = "door-row">
      <div class = "title-row">
        <img src = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">
        
        <p class = "instructions-title">Instructions</p>
        
				<img src = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">
      </div>
    </div>
    
    <table class = "instructions-row">
      <tr>
        <td class = "instructions-number">1</td>
        <td class = "instructions-text">Hiding behind one of these doors is the ChoreBot.</td>
      </tr>
      <tr>
        <td class = "instructions-number">2</td>
        <td class = "instructions-text">Your mission is to open all of the doors without running into the ChoreBot.</td>
      </tr>
      <tr>
        <td class = "instructions-number">3</td>
        <td class = "instructions-text">If you manage to avoid the ChoreBot until you open the very last door, you win!</td>
      </tr>
      <tr>
        <td class = "instructions-number">4</td>
        <td class = "instructions-text">See if you can score a winning streak!</td>
      </tr>
    </table>
    
    <div class= "door-row">
      <img id = "door1" class = "door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
    	<img id = "door2" class = "door-frame" src= "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
    	<img id = "door3" class = "door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
    </div>
    
    <div id = "start" class = "start-row">
      Good Luck!
    </div>
    
    <script type ="text/javascript" src="./script.js"></script>
  </body>
</html>


body {
background-color: #010165;
margin: 0px;
}

.header {
background-color: #00ffff;
text-align: center;
}

.title-row {
margin-top: 42px;
margin-bottom: 21px;
text-align: center;
}

.instructions-title {
display: inline;
font-size: 18px;
color: #00ffff;
font-family: ‘Work Sans’;
}

.instructions-row {
margin: 0 auto;
width: 400px;
}

.instructions-number {
padding-right: 25px;
font-family: ‘Work Sans’;
font-size: 36px;
color: #00ffff;
}

.instructions-text {
padding: 10px;
font-family: ‘Work Sans’;
font-size: 14px;
color: #ffff;
}

.door-row {
text-align: center;
}

.door-frame {
cursor: pointer;
padding: -10px;
}

.start-row {
margin: auto;
width: 120px;
height: 43px;
font-family: ‘Work Sans’;
background-color: #eb6536;
padding-top: 18px;
font-size: 18px;
text-align: center;
color: #010165;
margin-bottom: 21px;
cursor: pointer;
}


let doorImage1 = document.getElementById(‘door1’);
let doorImage2 = document.getElementById(‘door2’);
let doorImage3 = document.getElementById(‘door3’);
let startButton = document.getElementById(‘start’);

let botDoorPath = “https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg

let beachDoorPath = “https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg

let spaceDoorPath = “https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg

let closedDoorPath = “https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg

let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;

const isClicked = door => {
if (door.src === closedDoorPath) {
return false;
} else {
return true;
}
}

const playDoor = (door) => {
numClosedDoors–;
if (numClosedDoor === 0) {
gameOver(‘win’);
}
}

const randomChoreDoorGenerator = () => {
const choreDoor = Math.floor(Math.random() * numClosedDoors);
if (choreDoor === 0) {
openDoor1 = botDoorPath;
openDoor2 = beachDoorPath;
openDoor3 = spaceDoorPath;
} else if (choreDoor === 1) {
openDoor2 = botDoorPath;
openDoor1 = beachDoorPath;
openDoor3 = spaceDoorPath;
} else { (choreDoor === 2)
openDoor3 = botDoorPath;
openDoor1 = beachDoorPath;
openDoor2 = spaceDoorPath;
}
}

door1.onclick = () => {
if (!isClicked(doorImage1)) {
doorImage1.src = openDoor1;
playDoor();
alert(“Hello! I am an alert box!!”);
}
}

door2.onclick = () => {
if (!isClicked(doorImage2)) {
doorImage2.src = openDoor2;
playDoor();
alert(“Hello! I am an alert box!!”);
}
}

door3.onclick = () => {
if (!isClicked(doorImage3)) {
doorImage3.src = openDoor3;
playDoor();
}
}

const gameOver = (status) => {
if (status === ‘win’) {
startButton.innerHTML = ‘You win! Play again?’;
}
}

randomChoreDoorGenerator();

Ignore everyone I have found my mistake

Thank you to everyone who took a look at my problem!

What was the problem? Please post your solution and mark it as the solution.

Sorry all I can remember is that it was a typo :sweat_smile:

Ok. Never mind. Glad you found it. :smile: