I would appreciate it if someone could point out what is wrong with my isClicked()
function and/or the if block in door1.onclick()
?
door1.onclick()
doesn’t change the door1.src
attribute after adding the if
block.
const doorImage1 = document.getElementById('door1');
const doorImage2 = document.getElementById('door2');
const doorImage3 = document.getElementById('door3');
const imgPath = './img/';
const botDoorImg = imgPath + 'robot.svg';
const beachDoorImg = imgPath + 'beach.svg';
const spaceDoorImg = imgPath + 'space.svg';
const closedDoorImg = imgPath + 'closed_door.svg';
let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
function isClicked(door){
if (door.src === closedDoorImg){
return false;
} else {
return true;
}
}
const playDoor = () => {
numClosedDoors--;
console.log(numClosedDoors);
if (numClosedDoors === 0){
//gameOver();
alert('Game Over');
}
}
const randomChoreDoorGenerator = () => {
let choreDoor = Math.floor(Math.random() * numClosedDoors);
if (choreDoor === 0) {
openDoor1 = botDoorImg;
openDoor2 = beachDoorImg;
openDoor3 = spaceDoorImg;
} else if (choreDoor === 1) {
openDoor2 = botDoorImg;
openDoor1 = beachDoorImg;
openDoor3 = spaceDoorImg;
} else if (choreDoor === 2){
openDoor3 = botDoorImg;
openDoor2 = beachDoorImg;
openDoor1 = spaceDoorImg;
}
}
door1.onclick = () => {
if (!isClicked(door1)){
door1.src = openDoor1;
playDoor();
}
}
door2.onclick = () => {
door2.src = openDoor2;
playDoor();
}
door3.onclick = () => {
door3.src = openDoor3;
playDoor();
}
randomChoreDoorGenerator();