Chore Door Project

Hi All,

I am curios to know where I may have gone wrong in my following code for the Chore Door project (I am not finished yet I am at step 57.). The doors are not opening and I am not getting an error in the console. Code is below. Any help would be appreciated.

/** Global Variables */

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

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

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

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

const botDoorPath = "./src/robot.svg"

const  beachDoorPath = "./src/beach.svg"

const spaceDoorPath = "./src/space.svg"

let closedDoorPath = "./src/closed_door.svg";

const numClosedDoors = 3;

let openDoor1;

let openDoor2;

let openDoor3;

const isClicked = (door) => {

    if (door.src === closedDoorPath) {

        return false;

    } else {

        return true;

    }

}

const playDoor = () => {

    numClosedDoors--;

    if (numClosedDoors === 0) {

        gameOver('win');

    }

}

/** Function that generates a number between 0 and numClosedDoors */

const randomChoreDoorGenerator = () => {

    const choreDoor = Math.floor(Math.random() * numClosedDoors);

    if (choreDoor === 0) {

        openDoor1 = botDoorPath;

        openDoor2 = spaceDoorPath;

        openDoor3 = beachDoorPath;

    } else if (choreDoor === 1) {

        openDoor2 = botDoorPath;

        openDoor1 = beachDoorPath;

        openDoor3 = spaceDoorPath;

    } else if (choreDoor === 2) {

        openDoor3 = botDoorPath;

        openDoor2 = beachDoorPath;

        openDoor1 = spaceDoorPath;

    }

}

/**Changes source of img id door1|2|3 in index.html to Robot|Beach|Space Source */

doorImage1.onclick = () => {

    if (!isClicked(doorImage1)) {

    doorImage1.src = openDoor1;

    playDoor();

    }

}

doorImage2.onclick = () => {

    if (!isClicked(doorImage2)) {

    doorImage2.src = openDoor2;

    playDoor();

    }

}

doorImage3.onclick = () => {

    if (!isClicked(doorImage3)) {

    doorImage3.src = openDoor3;

    playDoor();

    }

}

/**Game over Function */

const gameOver = (status) => {

    if (status === 'win') {

        startButton.innerHTML = "You win! Play again?";

    }

}

randomChoreDoorGenerator()

Okay so I changed ~const numClosedDoors = 3 ~ to ‘let’ which makes sense because that variable changes. I also changed the following code:

const isClicked = (door) => {

    if (door.src === closedDoorPath) {

        return false;

    } else {

        return true;

    }

}

to…

const isClicked = (door) => {

    if (door.src != closedDoorPath) {

        return false;

    } else {

        return true;

    }

}

And now it works. Can someone please explain this logic as It has the opposite outcome to what I would expect.

Could you show us your doorimage onclick() functions?

/**Changes source of img id door1|2|3 in index.html to Robot|Beach|Space Source */

doorImage1.onclick = () => {

    if (!isClicked(doorImage1)) {

    doorImage1.src = openDoor1;

    playDoor(doorImage1);

    }

}

doorImage2.onclick = () => {

    if (!isClicked(doorImage2)) {

    doorImage2.src = openDoor2;

    playDoor(doorImage2);

    }

}

doorImage3.onclick = () => {

    if (!isClicked(doorImage3)) {

    doorImage3.src = openDoor3;

    playDoor(doorImage3);

    }

}

Which code are you using? Your original code, or what you changed it to that you said worked?

this is the code I’m using:

/** Global Variables */

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

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

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

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

let botDoorPath = "./src/robot.svg"

let beachDoorPath = "./src/beach.svg"

let spaceDoorPath = "./src/space.svg"

let closedDoorPath = "./src/closed_door.svg";

let numClosedDoors = 3;

let openDoor1;

let openDoor2;

let openDoor3;

const isBot = (door) => {

    if (door.src === botDoorPath) {

        return true;

    } else {

        return false;

    }

}

/**checks if the door is open by checkin the img source matches */

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

    }

}

/** Function that generates a number between 0 and numClosedDoors */

const randomChoreDoorGenerator = () => {

    const choreDoor = Math.floor(Math.random() * numClosedDoors);

    if (choreDoor === 0) {

        openDoor1 = botDoorPath;

        openDoor2 = spaceDoorPath;

        openDoor3 = beachDoorPath;

    } else if (choreDoor === 1) {

        openDoor2 = botDoorPath;

        openDoor1 = beachDoorPath;

        openDoor3 = spaceDoorPath;

    } else if (choreDoor === 2) {

        openDoor3 = botDoorPath;

        openDoor2 = beachDoorPath;

        openDoor1 = spaceDoorPath;

    }

}

/**Changes source of img id door1|2|3 in index.html to Robot|Beach|Space Source */

doorImage1.onclick = () => {

    if (!isClicked(doorImage1)) {

    doorImage1.src = openDoor1;

    playDoor(doorImage1);

    }

}

doorImage2.onclick = () => {

    if (!isClicked(doorImage2)) {

    doorImage2.src = openDoor2;

    playDoor(doorImage2);

    }

}

doorImage3.onclick = () => {

    if (!isClicked(doorImage3)) {

    doorImage3.src = openDoor3;

    playDoor(doorImage3);

    }

}

/**Game over Function */

const gameOver = (status) => {

    if (status === 'win') {

        startButton.innerHTML = "You win! Play again?";

    } else {

        startButton.innerHTML = "Game over! Play again?";

    }

}

randomChoreDoorGenerator()

Alright. I stand corrected regarding the logic. All of the !'s (not)'s confuse me sometimes. The issue with your code is the shortcut you took with the image paths. If you copy and paste the paths from the instructions, your code should work. I found it by printing the values in the console, and noticing that they will never match. I’m going to delete some of the previous posts, so as not to confuse any future readers of this topic.

Regarding your isClicked() function. Rather than returning true or false you can do something like this:

const isClicked = door => door.src != closedDoorPath //returns true or false

I’m using VS code to complete this project. So are you saying I cant download the images and put them in a src folder and path to them directly? I have to use the links?

Weird… You are right I changed the paths to the links provided and it works. Strange but thank you! I would have never figured that out haha. Interested to know why?

If you had downloaded the images, and placed them in the folder specified, it should have worked. Would take some investigating to figure out why it didn’t.

I do have them all downloaded and in the specified folder… Very strange

Can you view the images?

yes but they are in text format - svg files

I don’t know. It would take more work than I have time for right now to download everything, and try to replicate your issue.

Haha no worries. I will let you know if I figure it out but for now the links will do just fine.

1 Like

Hi! Can someone help me figure out the issue on my code? My Chore Door Project is not working.

Sharing my script.js here:

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 closedDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg';

let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
let currentlyPlaying = 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');
} 
}

const randomChoreDoorGenerator = () => {
  const 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 = beachDoorPath;
    openDoor2 = spaceDoorPath;
}
}

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

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

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

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

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

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


startRound();

Thank you!

Hello, @blog4616083888, and welcome to the forums.

Have you tried running your code with your own browser console open? If not, try it. If so, what error message(s) do you see?

Hi @midlindner!

Thank you for your feedback.

I’m getting Uncaught SyntaxError: Unexpected end of input (line 106) - which is startRound();

Hi, @midlindner I think found my error. I don’t have a closing bracket for my isBot function.

Thanks again for your assistance!

1 Like

That was it. When I ran your code with my Firefox console open, I saw this:

SyntaxError: missing } after function body
note: { opened at line 116, column 24

I had pasted your code below mine, so line 116 was the first line of your isBot function. Good job debugging your code!