Https://www.codecademy.com/courses/build-interactive-websites/projects/chore-door

Get Help JavaScript
#1

I am currently working on the Building and interactive website project and I have hit a wall, so from what I can see I have written all of the code out but when I click on the doors the images are not showing up? has anyone else completed this project and do you know where I am going wrong, I will copy and paste my JavaScript code below for anyone to take a look and advise me where I have made my mistake. I have had to take out the image URL as it would let me post this with them.

Thanks in Advance!!!

let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');
let startButton = document.getElementById('start'); 
let botDoorPath = 
let beachDoorPath ==
let spaceDoorPath =  
let closedDoorPath = 
let numClosedDoors = 3;
let openDoor1; 
let openDoor2;
let openDoor3;
let currentPlaying = 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('lose'); 
  }
};

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

door1.onclick = () => {
  if(currentlyPlaying && !isClicked(doorImage1)){
  doorImage1.src = openDoor1;
  playDoor(doorImage1);
  }
}
door2.onclick = () => {
  if(currentlyPlaying && !isClicked(doorImage2)){
  doorImage2.src = openDoor2;
  playDoor(doorImage2);
  }
}
door3.onclick = () => {
  if(currentlyPlaying && !isClicked(doorImage3)){
  doorImage3.src = openDoor3;
  playDoor(doorImage3); 
  }
}

startButton.onclick = () => {
  if(currentlyPlaying === false){
    startRound();
  }
};

const startRound = () => {
  door1.src = closedDoorPath; 
  door2.src = closedDoorPath; 
  door3.src = closedDoorPath; 
  numClosedDoors = 3; 
  startButton.innerHTML = 'Good Luck'; 
  currentlyPlaying = true; 
  
  randomChoreDoorGenerator(); 
};

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

startRound();
#2

you can use the console to debug your code (f12), then console tab (or use google to find how to open the console of your browser)

the console gives me an error for your code:

Uncaught SyntaxError: Unexpected identifier [script.js][line:6]

it even tells me the error is on line 6

#3

Why didn’t I think to use the dev tools…

Thank you for the quick response, I really appreciate it

#4

Also this will cause your game to not work properly.

#5

I have also ammended this, I noticed it as I was reading through, but thank you for the reply, my game is now in working order :+1:

1 Like
#6

I also noticed some “should be” errors in relation to DOM elements and variables.

Earlier you defined the following variables and assign DOM elements to them:

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

Yet further up you call those elements directly using their DOM Id names. For example:

door1.onclick = () => { // should be doorImage1.onclick

This is working due to browsers getting more smarter. This should however not be considered normal behavior.

1 Like
#7

Yeah I did wonder why it wasn’t throwing an error, I understand that with browsers improving it wouldn’t which is good in one sense but I agree with you, it isn’t normal behaviour and not something I should get used to doing. Thank you for pointing that out though as I never would have understood why it’s not throwing an error

1 Like
#8

SOLUTION: The code below was part one of my problem & another user helped me solve my other issue. Gonna leave this reply in hopes it helps others!

Question, what is recommendation to replace that with? Been working on this project for the past 3 hours and I can’t get it to work for the life of me. Here is what I have: Building Interactive Javascript Websites: Project Chore Door - JSFiddle - Code Playground

TIA for any help you can provide me :pray:

EDIT: Someone linked the code on github. Would this be the proper correction?

} else if (isBot(door) === true){