Chore Door

I’m working through the Chore Door project in the Web Development path: https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-websites/projects/chore-door

I’m having an issue between steps 46 and 57, as my doors are not opening nor is the text of my start button changing. I’ve gone again step by step and looked for errors, as well as following the steps in the Get Help video.

Here is my code:

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

    <!--instructions -->

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

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

<!--doors -->

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

Javascript:


let doorImage1 = document.getElementById('door1');

let doorImage2 = document.getElementById('door2');

let doorImage3 = document.getElementById('door3');

let startButton = document.getElementById('start');

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

let beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";

let spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";


let openDoor1;
let openDoor2; 
let openDoor3;

let numClosedDoors = 3;

const closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg";


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


const playDoor = () => {
numClosedDoors--;
if (numClosedDoors === 0) {
  gameOver('win');
} 
};


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

door1.onclick = () => {
if(!isClicked(doorImage1)) {
doorImage1.src = openDoor1;
playDoor();
} 
};

door2.onclick = () => {
if(!isClicked(doorImage2)) {
doorImage2.src = openDoor2;
playDoor();
} 
};

door3.onclick = () => {
if(!isClicked(doorImage3)) {
doorImage3.src = openDoor3;
playDoor();
} 
};

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

randomChoreDoorGenerator();




the first thing you should do, is open the console (f12, or right click -> inspect element -> console tab) to check for any possible errors

You have an syntax error somewhere:

Uncaught TypeError: Math.Random is not a function

that has fixed it, thank you!

I’m curious - how did you fix it? I’m getting the same error, but I don’t understand it. Thanks!

callmej9 used my reply, and realized the name of a built-in function/method (s)he tried to use wasn’t named correctly.