Chore door bots do not show behind doors when clicked?

Hi there i am new to this and wondering why my bots arn’t showing when I click them?
here is my work.
HTML

<!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://content.codecademy.com/projects/chore-door/images/logo.svg">
      </div>
      <div class = "title-row">
       <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>
<div class = "title-row" >
<img src = "https://content.codecademy.com/projects/chore-door/images/star.svg">
<p class= "instructions-title">Instructions</p>
<img src = "https://content.codecademy.com/projects/chore-door/images/star.svg">
        </div>

      <div class = "door-row">
      <img  id="door1"  class = "door-frame" src = "https://content.codecademy.com/projects/chore-door/images/closed_door.svg">
      
      <img id ="door2"  class= "door-frame" src= "https://content.codecademy.com/projects/chore-door/images/closed_door.svg" >
      
      <img id ="door3" class = "door-frame"
      src = "https://content.codecademy.com/projects/chore-door/images/closed_door.svg" >
  </div>
  <div id = "start-row">Good luck!</div>
  <script
   type="text/javascript" src = "script.js">
    </script>
  </body>
</html>

css

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:'WorkSans';

}

.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: auto;

width:120px;

height: 43px;

font-family: 'WorkSans';

background-color: #eb6536;

padding-top:18px;

font-size:18px;

text-align:center;

color:#010165;

margin-bottom:21px;

cursor: pointer;

}

JavaScript

let doorImage1 =

document.getElementById('door1');

let doorImage2=

document.GetElementById('door2');

let doorImage3=

document.getElementById('door3');

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

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

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

let numClosedDoors = 3;

let openDoor1;

let openDoor2;

let openDoor3;

const randomChoreDoorGenerator= () => {

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

if(choreDoor === 0) {

openDoor1 = botDoorPath;

openDoor2= beachDoorPath;

} else if (choreDoor === 1) {

openDoor2 = botDoorPath;

else{ (choreDooor=== 2)

openDoor3 = botDoorPath;

}

}

door1.onclick = () => {

doorImage1.src = openDoor1;

}

door2.onclick() => {

doorImage2.src = openDoor2;

}

door3.onclick() => {

doorImage3.src = openDoor3;

};

randomChoreGenerator();

I am slightly worried about this:

let doorImage1 =

document.getElementById('door1');

let doorImage2=

document.GetElementById('door2');

let doorImage3=

document.getElementById('door3');

I hope this went wrong when you copied the code to the forum

Have you checked the console (f12 -> then click console tab) for any errors?

I get an error on your else:

else if (choreDoor === 1) {

openDoor2 = botDoorPath;

else{ (choreDooor=== 2)

openDoor3 = botDoorPath;

}

}

which makes sense, you forgot to close (}) your else if

also, (choreDooor=== 2) isn’t doing anything. I recommend to remove it.

1 Like

Thank you for replying I will have another look at this.