Chore Door Final Steps Broke Game Functionality

I’m working on the chore door project and after steps 62-70 where the start button functionality was added and the loss clause was created the game no longer works. I cannot click the doors to get them to open or press the button.
I’ve tried commenting out the startRound and startButton.onclick functions but some things still aren’t working even before that point. I’ve also searched around the forums and copied my code into another editor to maybe catch my error but I’m still not sure what’s going on. Any help would be appreciated.

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>
    <!--Game header-->
    <header>
      <img src="https://content.codecademy.com/projects/chore-door/images/logo.svg"/>
    </header>
    <!--Game description-->
    <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"/>
      <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>
    <!--Game interface-->
    <div class="door-row">
      <img id="door1" class="door-frame" src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg" alt="closed door 1"/>
      <img id="door2" class="door-frame" src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg" alt="closed door 2"/>
      <img id="door3" class="door-frame" src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg" alt="closed door 3"/>
    </div>
    <div id="start" class="start-row">
      Good Luck!      
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS

body {
  background-color: #010165;
  margin: 0px;
}
header {
  background-color: #00ffff;
  text-align: center;
}
div.title-row {
  margin-top: 42px;
  margin-bottom: 21px;
  text-align: center;
}
.instructions-title {
  display: inline;
  font-size: 18px;
  color: #00ffff;
  font-family: 'Work Sans';
}
.instructions-number {
  padding-right: 25px;
  font-family: 'Work Sans';
  font-size: 36px;
  color: #00ffff;
}
.instructions-text {
  padding: 10px;
  font-family: 14px;
  font-size: 14px;
  color: #ffff;
}
.door-row {
  text-align: center;
}
.instructions-row {
  margin: 0 auto;
  width: 400px;
}
.door-frame {
  cursor: pointer;
  padding: 10px;
}
.start-row {
  margin: auto;
  width: 120px;
  height: 43px;
  font-family: 'Work Sans';
  background-color: #eb6536;
  padding-top: 18px;
  font-size: 18px;
  text-align: center;
  color: #010165;
  margin-bottom: 21px;
  cursor: pointer;
}

JavaScript

const startButton = document.getElementById('start');
let currentlyPlaying = true;
//Variables of each door
const doorImage1 = document.getElementById('door1');
const doorImage2 = document.getElementById('door2');
const doorImage3 = document.getElementById('door3');
//Door state variables
const closedDoorPath = "https://content.codecademy.com/projects/chore-door/images/closed_door.svg";
const botDoorPath = "https://content.codecademy.com/projects/chore-door/images/robot.svg";
const beachDoorPath = "https://content.codecademy.com/projects/chore-door/images/beach.svg";
const spaceDoorPath = "https://content.codecademy.com/projects/chore-door/images/space.svg";
let numClosedDoors = 3;
const openDoor = botDoorPath;
let openDoor1;
let openDoor2;
let openDoor3;

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;
  }
};
//On click functions for each door
doorImage1.onclick = () => {
  if(currentlyPlaying && !isClicked(doorImage1)) {
    doorImage1.src = openDoor1;
    playDoor(door1);
  }
};
doorImage2.onclick = () => {
  if(currentlyPlaying && !isClicked(doorImage2)) {
    doorImage2.src = openDoor2;
    playDoor(door2);
  }
};
doorImage3.onclick = () => {
  if(currentlyPlaying && !isClicked(doorImage3)) {
    doorImage3.src = openDoor3;
    playDoor(door3);
  }
};
//Button functionality
startButton.onclick() = () => {
  if(!currentlyPlaying) {
    startRound();
  }
};
const startRound = () => {
  numClosedDoors = 3;
  doorImage1.src = closedDoorPath;
  doorImage2.src = closedDoorPath;
  doorImage3.src = closedDoorPath;
  startButton.innerHTML = 'Good luck!';
  currentlyPlaying = true;

  randomChoreDoorGenerator();
};
//Game win logic
const gameOver = (status) => {
  if(status === 'win') {
    startButton.innerHTML = 'You win! Play again?';
  } else {
    startButton.innterHTML = 'Game over! Play again?';
  }
  currentlyPlaying = false;
};
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 = () => {
  numClosedDoors--;
  if(numClosedDoors === 0) {
    gameOver('win');
  } else if(isBot(door)) {
    gameOver();
  }
};

startRound();

Hi there, and welcome to the forums!

If you look here, you’ll notice that you have mixed the ES6 arrow syntax along with regular function syntax. This has resulted in two sets of brackets () when only one is required. If you change it to just be startButton.onclick then I think that should fix your issue.

1 Like