Chore Door Project HELP!

Hi, I’m working on the Chore Door project and am having trouble with steps 56-57. My ‘Good luck!’ button is supposed to change to ‘You win! Play again?’, but it’s not doing that. I have my code below if anyone could look at it.
I commented out the code from the later steps to try and figure this out. Thanks for the help!

My HTML code:

<!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://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg">
    </div>

    <div class="title-row">

      <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">
      <p class="instructions-title">
        Instructions
      </p>
      <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">

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

    <div class="door-row">
      <img id="door1" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
      <img id="door2" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
      <img id="door3" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/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>

My JavaScript code:

const doorImage1 = document.getElementById('door1');
const doorImage2 = document.getElementById('door2');
const doorImage3 = document.getElementById('door3');
const startButton = document.getElementById('start');

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

const numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;

let currentlyPlaying = true;
/*
const isBot = (door) => {
  if (door.src === botDoorPath) {
    return true;
  } else {
    return false;
  }
}*/

const isClicked = (door) => {
  if (door.src === closedDoorPath) {
    return false;
  } else {
    return true;
  }
}

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) {
    openDoor2 = botDoorPath;
    openDoor3 = beachDoorPath;
    openDoor1 = spaceDoorPath;
  } else {
    openDoor3 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
  }
}

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*/);
  }
}

const gameOver = (status) => {
  if (status === 'win') {
    startButton.innerHTML = 'You win! Play again?';
  } /*else {
    startButton.innerHTML = 'Game over! Play again?';
  }
  currentlyPlaying = false;*/
}
/*
startButton.onclick = () => {
  startRound();
}*/

randomChoreDoorGenerator();

Hello, @data1539820897, and welcome to the forums.

One issue with a project like this is when you have errors in your javascript, you don’t see them unless you have your browser’s console open. Try that, and you’ll see an error message which should point you right at the problem.

2 Likes