Chore Door - onclick image switch

Hi!
Regarding the onclick image switch command, it seems to b simple, but doesn’t work in my code. What is wrong about it?

doorImage1.onclick = () => {

door1.src = botDoorPath;

}

With kind regards, Yves

Hello, and welcome to the forums

Your click event is on doorImage1, but you’re changing the image source of door1

Hi selectall, thank you!
Yes, but the corrected code doesn’t work either:
let doorImage1 = document.getElementById(‘door1’);

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

doorImage1.onclick = () => {
doorImage1.src = botDoorPath;
}

Did you check the console of the browser to see if there are any errors? We uncovered 1 error in the snippet you posted already, but if there are errors in other parts of the code then it can stop your script from running.

If you decide to post your source in the forum, then be sure to use this option so we can read it easier:

image

Hi!
When I put the code into the console, it says:

“Uncaught TypeError: Cannot set property ‘onclick’ of null
at :14:20
(anonymous) @ VM54:14”

The code so far (but cannot identify a fault):



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

const botDoorPath =
  "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";
const beachDoorPath =
  "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
const spaceDoorPath =
  "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";

doorImage1.onclick = () => {
  doorImage1.src = botDoorPath;
}
doorImage2.onclick = () => {
  // Function code...;
}
doorImage3.onclick = () => {
  // Function code...;
}

With kind regards, Y

Task #4 of the project has you add an image to the HTML with an id of door1. Did you do that? Your JavaScript code relies on the ids to be there with the exact spelling they specified.

Yes:

<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>

Copy pasted the code snippets you provided into Codepen and it worked fine without errors.

The only possibility left is that the <script> element you added just above the closing </body> tag in Task #6 is no longer in the right spot. Perhaps the script is running before the HTML is loaded.

If that also isn’t it, then you’ll need to post the entire source of your project instead of isolated snippets. You could do that using the method you have already, or you can use the Share Code feature from within the learning environment to produce a sharable link you can paste.
image

You were right! There had been two simple faults in the “script” tag! Thank you for efforts to help me… So next time I have to make sure that the code is set properly. Have a nice weekend though :slight_smile:

Another issue:
When I put
onst gameOver = status => { if (status === "win") { startButton.innerHTML = 'You win! Play again?'; } }
into the console, it states “VM634:1 Uncaught SyntaxError: Identifier ‘gameOver’ has already been declared”
But I am sure this is the first time it was declared, or how can I understand this assertion?

With kind regards, YL

The code should be:

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