Chore Door start button inner html not changing


#1

I’m having trouble with step 57 of the chore door assignment for interactive javascript.

I can’t seem to figure out where I have gone wrong and the inner HTML of the start button will not change after clicking all 3 doors as it should.

let doorImage1 = document.getElementById("door1")
let doorImage2 = document.getElementById("door2")
let doorImage3 = document.getElementById("door3")
const botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg"
const beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg"
const spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg"
let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
const closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg";
let startButton = document.getElementById('start');

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

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





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

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

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

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

const gameOver = (str) => {
  if (str === 'win') {
    return startButton.innerHTML = 'You win! Play again?';
  }
}

randomChoreDoorGenerator()


#2

None of the event handlers should have return in them. In your door handlers any code after return is unreachable. Remove that keyword and things should work.


#3

Do you happen to know why return is invalid here?


#4

Your three door click handlers should be changing the door image source, and then call playDoor(). It would be perfectly valid to use return on the second line, but not really necessary. It won’t make any difference either way.

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

An event handler does some action in response to the event. The caller is not expecting a return, but since the return is a function call, it goes through. It does overcomplicate things. Simple is better. Less explanation needed.

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

This will be invalid because we cannot return a statement. All that needs to happen is complete the statement with no return. The change takes immediate effect on the display.