Chore door


I have a problem with the Chore door project for the Web development path. For some reason the code is not working, precisely the function part. It should replace the src of the image when the doors are clicked but it doesen’t.

Here is the code:


<!DOCTYPE html>
    <title>Chore Door!</title>
    <link href="./style.css" rel="stylesheet" type="text/css">
    <link href="" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="script.js"></script>

		<div class="door-row">
      <img id="door1" class="door-frame" src="">
      <img id="door2" class="door-frame" src="">
      <img id="door3" class="door-frame" src="">


let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');
let botDoorPath = "";
let beachDoorPath = "";
let spaceDoorPath = "";

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

door2.onclick = () => {
  doorImage2.src = beachDoorPath;

door3.onclick = () => {
  doorImage3.src = spaceDoorPath;

What did i do wrong?


the html file loads from top to bottom, so when the JS file is read, door1 (the html element) doesn’t exist yet


I tried moving the script file to the bottom, before the closing body tag, but it didn’t help.


its working fine on jsbin:,js,output

i can’t find the lesson, please share the lesson url so i can run your code in the exercise


I just realized that when i moved the script i copied instead of cutting. So the original was still in the head section. It works, thanks for the help friend. :slight_smile:


This topic was automatically closed after 7 days. New replies are no longer allowed.