Hi
I have come to the end of the chore door exercise and after i have saved task 69 and go to click on the doors, the images of the doors now, break or rather they come out like this
I have followed it step by step, with help from the instruction vid, so unable to see where i have gone wrong. Has anyone else encountered this issue? Any help would be appreciated?
James.
This issue (or very similar) has come up here several times. But we won’t be able to help without seeing your code.
Here is my code…
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://content.codecademy.com/projects/chore-door/images/logo.svg"> </div>
<div class ="title-row"> <img src = "https://content.codecademy.com/projects/chore-door/images/star.svg">
<p class= "instructions-title">Instructions </p>
<img src = "https://content.codecademy.com/projects/chore-door/images/star.svg">
</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">
<img id ="door1" class = "door-frame" src ="https://content.codecademy.com/projects/chore-door/images/closed_door.svg">
<img id ="door2" class = "door-frame" src ="https://content.codecademy.com/projects/chore-door/images/closed_door.svg">
<img id ="door3" class ="door-frame" src ="https://content.codecademy.com/projects/chore-door/images/closed_door.svg">
</div>
<div id ="start" class ="start-row">Good luck!</div>
</body>
<script type ="text/javascript" src ="script.js">
</script>
</html>
CSS
body {
background-color: #010165;
margin: 0px;
}
.header {
background-color: #00ffff;
text-align: center;
}
.title-row {
margin-top: 42px;
margin-bottom: 21px;
text-align: center;
}
.instructions-title {
display: inline;
font-size: 18px;
color: #00ffff;
font-family: 'Work Sans'
}
.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;
}
.door-row {
text-align: center;
}
.door-frame {
cursor: pointer;
padding: 10px;
}
.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;
}
JS
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;
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(doorImage1)) {
doorImage1.src = openDoor1;
playDoor(door1);
}
}
door2.onclick = () => {if(currentlyPlaying &&!isClicked(doorImage2)) {doorImage2.src = openDoor2;
playDoor(door2);
}
}
door3.onclick = () => { if(currentlyPlaying &&!isClicked(doorImage3)) { doorImage3.src = openDoor3;
playDoor(door3);
}
}
startButoon.onclick = () => {
if(!currentlyPlaying) {
startRound();
}
}
const startRound = () => {
door1.src = closedDoorPath;
door2.src = closedDoorPath;
door3.src = closedDoorPath;
numClosedDoors = 3;
currentlyPlaying = true;
startButton.innerHTML = 'Good luck!';
randomeChoreDoorGenerator();
}
const gameOver = (status) => {
if (status === 'win') {
startButton.innerHTML = 'You win! Play again?';
} else {
startButton.innerHTML = 'Game over! Play again?'
}
currentlyPlaying = false;
}
startRound();
I see two issues here:
The first is this error message:
ReferenceError: Can't find variable: startButoon
I think there’s not much to say about it – find where you defined the variable and check if you have defined it at all, just misspelled it or if it isn’t available in the scope.
Then this syntax error
There are more reference errors, are you working in an environment where you can check the console?
I am checking the console, though unlike previous tasks, these errors dont come up and arent pretty obvious. Thanks for showing where i have gone wrong in the above. I’ve corrected this now, and now the doors wont open. My next action will be to go through the code and check for reference and syntax errors, i’ve neglected checking that i.e. easy/silly spelling errors, so it will be best for me to get into the routine of checking over my code first before completing, as this is one of the areas thats a weakness for me, and i was working on.
I remember finding some of the error messages in the codecademy working environment not always very helpful. So if you’re developing in the codecademy environment, you could try to use https://jsfiddle.net as a complement. At least you’d get the reference errors. Going through all of that like a lector trying to find all the typos by simply reading your code is tedious and not the most secure method.
The reference errors caused by misspelling in the global scope are easy to find, but sometimes the errors from the console aren’t that clear. Then you would need to add consoles to your functions and trace the variables in order to see where they get lost.
I now dont seem to be able to open the doors at all. I have copied the code onto jsfiddle.net, and i dont know if the error its recording on there is correct or is affecting the overall issue that seems to be since i have changed and corrected any syntak errors im now unable to open the doors and therefore complete the game.
Ive included the js code as it is below-
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;
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 === false) {
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();
It gives you a syntax error, right?
That’s correct:
The syntax for if else statements is as follows:
if( condition ){
// your code
} else if( condition ){
// your code
} else {
// your code
}
If you have a condition, you need to write else if. else is the fallback if all conditions are failing.
And that was what was wrong and was staring right at me! That sorted it, thank you for your help!