Need help with Chore Door

Language Help JavaScript
1

I am doing the Chore Door project in the Building Interactive Websites section. The program doesn’t work properly. When I click on a door, the image of the door disappears into the small icon indicating the image can’t be found. Also, the game doesn’t keep track of a win or a loss. If I click on the doors (even though I can’t see what is behind them, I always win.

I have gone through my code several times, I found a couple of typos, and I had a section of logic in the incorrect place. I have also looked at every hint and gone over the video and checked my code by line and even with my code being identical, it still doesn’t work. Lastly I made one correction I found in the forums removing brackets around an else statement. After all that, it still isn’t working. Can someone please look over my code and tell me where I am stumbling?
Thanks!

// Access HTML elements
let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');
let startButton = document.getElementById('start');


let botDoorPath = 'https://content.codecademy.com/projects/chore-door/images/robot.svg';
let beachDoorPath = 'https://content.codecademy.com/projects/chore-door/images/beach.svg';
let spaceDoorPath = 'https://content.codecademy.com/projects/chore-door/images/space.svg';
let closedDoorPath = 'https://content.codecademy.com/projects/chore-door/images/closed_door.svg';

let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
let currentlyPlaying = true;

// Define game logic to check doors, progress game, end game, and choose a random chore door
const isClicked = (door) => {
  if (door.src === closedDoorPath){
    return true;
  } else return false;
    
}

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

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


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

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





doorImage1.onclick = () => {
  if (currentlyPlaying && isClicked(doorImage1)) {
    doorImage1.src = openDoor1;
    playDoor(doorImage1);
  }
}

doorImage2.onclick = () => {
  if (currentlyPlaying && isClicked(doorImage2)) {
    doorImage2.src = openDoor2;
    playDoor(doorImage2);
  }
}

doorImage3.onclick = () => {
  if (currentlyPlaying && isClicked(doorImage3)) {
    doorImage3.src = openDoor3;
    playDoor(doorImage3);
  }
}

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

// Start a game round
const startRound = () => {
  doorImage1.src = closedDoorPath;
  doorImage2.src = closedDoorPath;
  doorImage3.src = closedDoorPath;
  numClosedDoors = 3;
  currentlyPlaying = true;
  startButton.innerHTML = 'Good Luck!';
  randonmChoreDoorGenerator();
}
startRound();
2

Please, edit your post to format your code. I formatted your code for you. See How do I format code in my posts?
A link to the project would also be helpful.

3

I found the project, copy/pasted your code into it. If you open your browser’s console, and click the Save button, you’ll see a very helpful error message. Proof reading code is a time consuming pain. Debugging is an extremely useful skill, and very worthwhile to practice and master. Try using your browser’s console, and let us know if you find the error, or if you need additional help.

1 Like
4

Sorry, I am not getting an error. Perhaps I am not understanding what you are asking me to do. What is the error, please?

5

If you Right-Click your mouse on the webpage for the exercise, you’ll see an option to Inspect. Select that. It should open some browser tools at the bottom of your screen (possibly on either side of the screen depending on your browser). Make sure the console tab is selected. Here’s a couple of screenshots (using Firefox).

image
image1920×1034 152 KB

image
image1920×968 112 KB

You’ll see lots of text in the console initially. Some errors on CC’s part and lots of other information. You can ignore everything, until after you click Save. Then you’ll see the error that comes up when your code is executed.

6

LOL Time to go to the optometrist to get my prescription updated, I think. I didn’t know I could do the webdev tools inside of the Codeacademy site for my projects like I could elsewhere --thank you. I would have picked up my small typo error sooner. It is a lot easier when VS Code just yells at me in real time lol.
That being said, no matter how I dock the console, my screen didn’t look like yours. Mine was not very functional…except that it pointed out the error nicely.

Thank you for your time and help.

Bill

1 Like
7

The appearance isn’t relevant. Glad you got it working. Happy coding!