Building Interactive Javascript Websites: Project Chore Door

Been messing with this Project: Chore Door for the past two hours and can’t seem to get it to work. Watched the video, searched the forums, even ran it through JSLint, VS Code, and the browser console. I would very greatly appreciate if someone could please look through my script.js and please tell me where I am going wrong.

NOTE: Unsure if it is related but I do have a few warnings in my browser console: Screenshot by Lightshot

EDIT: Here’s a JSFiddle link to make it easier to work with: Building Interactive Javascript Websites: Project Chore Door - JSFiddle - Code Playground

script.js

// Access HTML elements
let doorImage1 = document.getElementById("door1");
let doorImage2 = document.getElementById("door2");
let doorImage3 = document.getElementById("door3");
let startButton = document.getElementById("start");

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 closedDoorPath = "https://content.codecademy.com/projects/chore-door/images/closed_door.svg";

let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
let currentlyPlaying = true;

// Define game logic to check doors, progress game, end game, and choose a random chore door

const isClicked = (door) => {
    if (door.src === closedDoorPath) {
        return true;
    } else {
        return false;
    }
};
const isBot = (door) => {
    if (door.src === botDoorPath) {
        return true;
    } else {
        return false;
    }
};
const gameOver = (status) => {
    if (status === "win") {
        startButton.innerHTML = "You Win! Play again?";
    } else {
        startButton.innerHTML = "Game Over! Play again?";
    }
    currentlyPlaying = false;
};

const playDoor = (door) => {
    numClosedDoors--;
    if (numClosedDoors === 0) {
        gameOver("win");
    } else if (isBot(door)) {
        gameOver();
    }
};

const randomChoreDoorGenerator = () => {
    let choreDoor = Math.floor(Math.random() * numClosedDoors);
    if (choreDoor === 0) {
        openDoor1 = botDoorPath;
        openDoor2 = beachDoorPath;
        openDoor3 = spaceDoorPath;
    } else if (choreDoor === 1) {
        openDoor1 = beachDoorPath;
        openDoor2 = botDoorPath;
        openDoor3 = spaceDoorPath;
    } else {
        openDoor1 = beachDoorPath;
        openDoor2 = spaceDoorPath;
        openDoor3 = botDoorPath;
    }
};

doorImage1.onclick = () => {
    if (currentlyPlaying && isClicked(doorImage1)) {
        doorImage1.src = openDoor1;
        playDoor(doorImage1);
    }
};

doorImage2.onclick = () => {
    if (currentlyPlaying && isClicked(doorImage2)) {
        doorImage2.src = openDoor2;
        playDoor(doorImage2);
    }
};

doorImage3.onclick = () => {
    if (currentlyPlaying && isClicked(doorImage3)) {
        doorImage3.src = openDoor3;
        playDoor(doorImage3);
    }
};

startButton.onclick = () => {
    if (currentlyPlaying === false) {
        startRound();
    }
};

// Start a game round

const startRound = () => {
    doorImage1 = closedDoorPath;
    doorImage2 = closedDoorPath;
    doorImage3 = closedDoorPath;
    numClosedDoors = 3;
    currentlyPlaying = true;
    startButton.innerHTML = "Good Luck!";
    randomChoreDoorGenerator();
};

startRound();

index.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">
      <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>

    <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://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" class="start-row">Good luck!</div>

    <script type="text/javascript" src="script.js"></script>

  </body>

</html>

style.css

body {
  background-color: #010165;
  margin: 0px;
}

.header {
  background-color: #00ffff;
  text-align: center;
}

.title-row {
  margin-top: 42px;
  text-align: center;
  margin-bottom: 21px;
}

.instructions-title {
  display: inline;
  font-family: 'Work Sans';
  font-size: 18px;
  color: #00ffff;
}

.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;
  background-color: #eb6536;
  padding-top: 18px;
  font-family: 'Work Sans';
  font-size: 18px;
  text-align: center;
  color: #010165;
  margin-bottom: 9px;
  cursor: pointer;
}

The problem is in the startRound function.

doorImage1 is an HTML element (an img element), but closedDoorPath is a string.
So you’re changing doorImage1 to be a string when you do
doorImage1 = closedDoorPath;
You actually only need to change the src of that HTML img element;
so you should do
doorImage1.src = closedDoorPath;
and similarly for doorImage2 and doorImage3 .

1 Like

Tyvm for taking the time to explain that to me. It is indeed working know! Appreciate it :call_me_hand: