Chore Door Step 45

Hi guys,

So like many others it seems. I am stuck at step 45 on the Chore Door project:
https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-websites/projects/chore-door

My problem is that before moving onto Lets make this act like a game! part 1, the .onclick was working fine and now the doors don’t open.

It is probably a typo but I just cant see it, the error that the console it throwing me is:
"Uncaught SyntaxError: Malformed arrow function parameter list at https://cdpn.io/boomboom/v2/index.html?editors=1111&key=iFrameKey-a5531809-2895-b073-d34e-25efbc36cdcb:154"

I have no idea what this means, I have looked at all my arrow functions and they seem fine?

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>
<!-------------------HEADER-------------------->
    <header class='header'>
      <img src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg'>
    </header>
<!-------------------INSTRUCTIONS TITLE-------------------->    
    <section 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>
    </section>
<!-------------------INSTRUCTIONS-------------------->
    <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-------------------->
    <section 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'>
    </section>
<!-------------------STATUS-------------------->
    <section id='start' class='start-row'>
      Good Luck!
    </section>
    <script type='text/javascript' src='./script.js'></script>
  </body>
</html>

CSS:

body {
  background-color: #010165;
  margin: 0px;
}
/*-------------HEADER/LOGO--------------*/
.header{
  background-color: #00ffff;
  padding: 10px;
  text-align: center;
}
/*-------------GAME TITLE--------------*/
.title-row{
  margin-top:42px;
  margin-bottom:21px;
  text-align:center;
}
/*-------------INSTRUCTIONS--------------*/
.instructions-title{
  display: inline-block;
  font-size:18px;
  color: #00ffff;
  font-family: 'Work Sans';
  padding: 0 10px
}

.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;
}
/*-------------DOORS--------------*/
.door-row{
  text-align: center;
}

.door-frame {
  cursor: pointer;
  padding: 10px;
}

/*-------------STATUS--------------*/
.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:

//doors
let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');
const numClosedDoors = 3;

//open door theme
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';

//open doors
let openDoor1;
let openDoor2;
let openDoor3;

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

//door click
doorImage1.onclick = () => {
  doorImage1.src = openDoor1
};
doorImage2.onclick = () => {
  doorImage2.src = openDoor2
};
doorImage3.onclick = () => {
  doorImage3.src = openDoor3
};

randomChoreDoorGenerator()

Thank you for looking it over.

In combination with the error: "Uncaught SyntaxError: Malformed arrow function parameter list

Should give you the answer to what is wrong :wink:

1 Like

This topic was automatically closed 18 hours after the last reply. New replies are no longer allowed.