Chore Door, Step 45 (function not working)


#1

I’m stuck on JavaScript course’s Chore Door Project. I’m at step 45, but the function doesn’t seem to be working even though it should work according to the step instructions. Nothing happens when I click the doors. I’m starting to lose my mind… please help me!

My JavaScript code:

let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');

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 numClosedDoors = 3;

let openDoor1 = ();
let openDoor2 = ();
let openDoor3 = ();

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

door1.onclick = () => {
  doorImage1.src = openDoor1; 
};

door2.onclick = () => {
  doorImage2.src = openDoor2;
};

door3.onclick = () => {
  doorImage3.src = openDoor3;
};

randomChoreDoorGenerator();

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" alt="Logo" />
    </div>
    
    <div class = "title-row"> 
    <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg" alt="Star" /> 
      <p class = "instructions-title"> Instructions </p>
      <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg" alt="Star" />
    </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">
      <div id="start" class="start-row">
        Good luck! 
      </div>
      <img id = "door1" class = "door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" alt = "A silly door." />
      <img id = "door2" class = "door-frame"
src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" alt = "A silly door." />
      <img id = "door3" class = "door-frame"
src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" alt = "A silly door." />
    </div>

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

#2

JavaScript does not support tuples.

It is sufficient enough to declare these variables without defining them.

let openDoor1, openDoor2, openDoor3;

#3

I’m having the exact same problem at this step! My code looks really similar to the original poster’s. Nothing happens when I click on any of the doors, yet in earlier steps I was able to get the doors to function properly. I don’t know what’s wrong. Here’s my code:

JavaScript:

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

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

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

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

const randomChoreDoorGenerator = () => {
  let 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 (choreDoor === 2) {
    openDoor3 = botDoorPath;
    openDoor1 = spaceDoorPath;
    openDoor2 = beachDoorPath;
  }
};
  
let numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;

door1.onclick = () => {
  doorImage1.src = openDoor1;
};

door2.onclick = () => {
 doorImage2.src = openDoor2;
};

door3.onclick = () => {
 doorImage3.src = openDoor3;
};

randomChoreDoorGenerator();

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


#4

I managed to fix it on my own! I made a few tweaks to my JavaScript. Here is what I have up until step 45!

JavaScript:

doorImage1 = document.getElementById("door1");

doorImage2 = document.getElementById("door2");

doorImage3 = document.getElementById("door3");

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

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

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

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

let openDoor1;
let openDoor2;
let openDoor3;

door1.onclick = () => {
  doorImage1.src = openDoor1;
};

door2.onclick = () => {
 doorImage2.src = openDoor2;
};

door3.onclick = () => {
 doorImage3.src = openDoor3;
};

randomChoreDoorGenerator();

#5

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