Chore Door Step 17, Bot Door worked previously but now not working

On step 17, but the bot door worked previously when I clicked on the door, but now it no longer works. I haven’t touched the bot door code since I created it, but still something has gone wrong.

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 = "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>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

Script:

let doorImage1 = document.getElementById("door1");

let doorImage1 = document.getElementById("door2");

let doorImage1 = document.getElementById("door3");

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

doorImage1.onclick = () => {

doorImage1.src = botDoorPath;

};

doorImage2.onclick = () => {

};

doorImage3.onclick = () => {

};

if you look in your console (f12 -> console tab), I get the following error:

Uncaught SyntaxError: redeclaration of let doorImage1

If I then look here:

let doorImage1 = document.getElementById("door1");

let doorImage1 = document.getElementById("door2");

let doorImage1 = document.getElementById("door3");

I see the problem. You do indeed re-declare a variable. That is a problem

1 Like

oops, haha, thank you very much! and thank you for the f12 thing, that should help me a lot!

1 Like

Using the (dev) tools available is absolutely recommended, there is a reason these tools exists :wink:

2 Likes