Help with chore door project

let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');
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 numclosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
const randomChoreDoorGenerator = () =>{
  let 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 if(choreDoor === 2){
    openDoor3 = botDoorPath
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
  }
}
doorImage1.onclick = () =>{
  doorImage1.src = openDoor1;
}
doorImage2.onclick = () =>{
	doorImage2.src = openDoor2;
}
doorImage3.onclick = () =>{
  doorImage3.src = openDoor3;
}
randomChoreDoorGenerator();
<!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="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>
    <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: #ffffff;
}
.door-row{
  text-align: center;
}
.door-frame{
	cursor: pointer;
  padding: 10px;
}
.start-row{
  margin: 0 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;
}

when i do this my code doesont work its just show an img logo when i press its do some kind of a logo img but not my script
2019-09-22|690x388

I am looking into it but I can’t seem to find anything that explains the images not being shown. If there is anything wrong it should be in the javascript. To my knowledge you don’t have to do anything to the CSS and HTML.

Upon refresh are the closed doors being shown?

2 Likes

I know it’s pretty wired case this problem I can’t continue my project

Hello :slight_smile:

There is an error in your code, here:

let choreDoor = Math.floor(Math.random() * numClosedDoors);

Variable numClosedDoors is undefined. This is why every condition in randomChoreDoorGenerator function evaluates to false. In the result variables openDoor1, openDoor2, openDoor3 are left undefined.

This line of code:

doorImage1.src = openDoor1;

changes src of doorImage1 element to undefined :slight_smile:


To fix this problem please change this line:

let numclosedDoors = 3;

to:

let numClosedDoors = 3;
4 Likes

■■■■, well spotted how did I miss that :stuck_out_tongue: !

1 Like

Thenks you very much
I will try it

1 Like