Chore Bot - Javascript, images not loading

Get Help JavaScript
#1

Hello everybody,

This project hasn’t been too much of an issue so far, everything was well until the function ‘randomChoreDoorGenerator’. The bot/beach/space images now don’t load, when they did 2 min earlier… The interaction does work, but no image, and I haven’t changed the variable with the images URL… So where does this error comes from ?
A million thanks in advance

let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');

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

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;
    openDoor2 = spaceDoorPath;
    openDoor1 = beachDoorPath;
  }
};

doorImage1.onclick = () => {
  doorImage1.src = openDoor1;
};

doorImage2.onclick = () => {
  doorImage2.src = openDoor2;
};

doorImage3.onclick = () => {
  doorImage3.src = openDoor3;
};

randomChoreDoorGeneretor();



<!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 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>

<script type='text/javascript' src='script.js'></script>

  </body>
</html>
#2

It’s just a typo, Generator not Generetor.
It’s ok we all do the same mistakes :smiley: .

#3

Oh thanks a lot ! I guess after a while you don’t see small things, re-reading countless times … It’s a bit frustrating though !

#4

It’s ok just find your way to debug the code, what I did is first I tried to put the source of these images directly on the HTML to figure out if they work or not. Also, I find using console.log() very powerful. I tried to first make sure that the function is working so

const randomChoreDoorGenerator = () => { 
    console.log("hello world!"); // just for debug
    ...
}

And now I don’t care if there is a problem in the logic inside the function or not it’s just a console.log() it should work! But It didn’t work!
so I said ok maybe the js file isn’t connected to the HTML! so I added another console.log() to the js file outside the function to check if the file connected or not and, it worked. so js is already connected. so now it’s easy to figure out there is a typo in the function call.

Just keep in your mind that we are dealing with a compiler, not a human. so It’s really rare if the mistake comes from the compiler.

1 Like
#5

That’s some great tips, I’ll keep that in mind, thank you so much. Finding a way/process to debug is definitely something I want to improve.