Chore Door Innerhtml -> doesn't change

Hi there.

I got a bit stuck at Chore Door project. The issue i have is that the innerHTML commands don’t change the Text of the start Button.

I spiced the code up with some console.log commands to find out if it the function was even getting to the point where the InnerHTML commands are executed.

And both of the console.log commands ( ‘lose’ and ‘win’) were triggered when they should but the innerHTML didn’t change. I also didn’t get any error from console. Does anybody spot the error i did?

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

const isBot = (door) => {
  if (door.src===botDoorPath){
    return true;
  }else {
    return false;
  }
}; // Brauch ich dieses semilikon hier ?
const isClicked = (door) => { // Muss ich funktionen als const oder let definieren? 
if (door.src===closedDoorPath){
  return false;
}else {
  return true;
}
}
const playDoor = (door) => {
  numClosedDoors--; 
  if (numClosedDoors===0) { // is die Kondition hier wirklich 0 ? oder eher 1 ?
   gameOver('win'); 
  }else if (isBot(door)){
    gameOver('lose');
  }else {
    console.log('I choose the other');
  }
}

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);
  
}
} 
gameOver = (status) =>{
  if (status==='win') {
    console.log('win')
    startButton.innerHtml =' You win! Play again?';
  } else if (status=== 'lose'){
    console.log('lose')
    startButton.innerHtml = 'Game over! Play again?';
  } else {
    console.log(' The other options at the Gamer0verfunction has not been triggerd ')
  }
}
randomChoreDoorGenerator = () => {
  const choreDoor = Math.floor(Math.random() * numClosedDoors);
  if(choreDoor===0){
    openDoor1=botDoorPath;
    openDoor2=beachDoorPath;
    openDoor3=spaceDoorPath;
  }else if (choreDoor===1){
    openDoor2=botDoorPath;
    openDoor1=spaceDoorPath;
    openDoor3=beachDoorPath;
  }else if (choreDoor===2) {
    openDoor3=botDoorPath;
    openDoor2=spaceDoorPath;
    openDoor1=beachDoorPath;
    }
}
randomChoreDoorGenerator();
<!DOCTYPE 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 withouth 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 strike</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">
    </div>
    <div class="door-row"> 
      <img id="door2" class="door-frame" src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg">
    </div> 
    <div class="door-row"> 
      <img id="door3" class="door-frame" src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg">
    </div>
    <script type="text/javascript" src="script.js"></script>
  <div id="start" class="start-row">Good Luck!</div>
  </body>
</html>

your capital lettering of the innerHTML method is incorrect, HTML is all uppercase, I suppose because html is an abbreviation? see docs

anyway, I would recommend textContent instead, if your purpose is to render text. textContent docs. Works the same, but the text is rendered as string, not html

2 Likes

No, JS is very forgiving if you neglect semicolons in general. It is just a good practice to use them for readability reasons. In the end – Geschmackssache.

You can also define that as let. But since you probably don’t want to reassign that variable, it is clearer if you define that as const.

1 Like

ah yeah that was the mistake now its working . Thanks for the quick help!

i will take a look at textContent thx :slight_smile:

Strangely it’s working inside of jsfiddle.net but not inside codecademy :sweat_smile:

Thanks for clarifying my Questions :slight_smile:

1 Like