ChoreDoor Prj (Step 45 )


#1

Hey guys! I don’t know what is going on with my code and if someone can help me I would appreciate it! So, after step 45 I have tried to open the doors but when I click on any door img it appears like broken img and because of that I can’t check whether my randomizer function works or not… It happened right after I’ve changed onclick parts for openDoor1, 2 and etc. I tried to change it back to beachDoorPath and etc. and it displays everything fine. I work with chrome.
P.S. I do also believe that my randomizer part doesn’t work proerly… robot just appears on the same spot…

<!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://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg"/>
    	</div>
    		<div class="title-row">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg"/>
          <p class="instructions-title">Instructions</p>
					<img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg"/>
    		</div>
    <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>
    			<div class="door-row">
      			<img id="door1" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" alt="door"/>
     			 <img id="door2" class="door-frame"
src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" alt="door"/>
      		<img id="door3" class="door-frame"
src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" alt="door"/>
              <div id="start" class="start-                   row">Good Luck!</div>
    		</div>
<script type="text/javascript" src="script.js">
    </script>
  </body>
</html>

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: 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-frame {
  cursor: pointer;
  padding: 10px;
}

.door-row {
  text-align: center;
}

#start {
  height: 43px;
  width: 120px;
  margin: auto;
  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;  
}
let doorImage1 =
document.getElementById("door1");
let doorImage2 =
document.getElementById("door2");
let doorImage3 =
document.getElementById("door3");

door1.onclick = () => {
  doorImage1.src = openDoor1;
};
door2.onclick = () => {
  doorImage2.src = openDoor2;
};
door3.onclick = () => {
  doorImage3.src = openDoor3;
};

let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";
let beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
let spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";

let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
const randomChoreDoorGenerator = () => {
  let choreDoor = Math.floor(Math.random() * numClosedDoors);
  if (choreDoor === 1) {
    openDoor1 = botDoorPath;
    openDoor2 = beachDoorPath;
    openDoor3 = spaceDoorPath;
  } else if(choredoor === 2) {
    openDoor2 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor3 = spaceDoorPath;
  } else if(choredoor === 3) {
    openDoor3 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
  }
};

randomChoreDoorGenerator();

26


#2

is this:

let doorImage1 =
document.getElementById("door1");

one or two lines? It should be one line.

check the value to see it goes correctly:

let doorImage1 =
document.getElementById("door1");
console.log(doorImage1);

this should log to your browser console. If you don’t know the browser console, you can google how to use it for your specific browser, it can help you with debugging.


#3

Event listeners need to written at the end of the source code, after all the functions so the variables are defined already.

# all constant elements
# all global variables
# all functions
# all event listeners
# call to run code

#4

Hey mtf, thanks for quick respond I have tried going these sequence correct me if I’m wrong again… coz it’s still the same…

var doorImage1 =
    document.getElementById("door1");
var doorImage2 =
    document.getElementById("door2");
var doorImage3 =
    document.getElementById("door3");
var botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";
var beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
var spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";

var numClosedDoors = 3;
var openDoor1;
var openDoor2;
var openDoor3;

const randomChoreDoorGenerator = () => {
  let choreDoor = Math.floor(Math.random() * numClosedDoors);
  if (choreDoor === 1) {
    openDoor1 = botDoorPath;
    openDoor2 = beachDoorPath;
    openDoor3 = spaceDoorPath;
  } else if(choredoor === 2) {
    openDoor2 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor3 = spaceDoorPath;
  } else if(choredoor === 3) {
    openDoor3 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
  }
};

door1.onclick = () => {
  doorImage1.src = openDoor1;
};
door2.onclick = () => {
  doorImage2.src = openDoor2;
};
door3.onclick = () => {
  doorImage3.src = openDoor3;
};

randomChoreDoorGenerator();

#5

Thanks stetim,
I changed it but nothing really happened…


#6

@stetim94 pointed out that assignments should happen on one line.

var doorImage1 =
    document.getElementById("door1");

should be,

var doorImage1 = document.getElementById("door1");

Since these are objects that we do not want to change, we can declare them as constants.

const doorImage1 = document.getElementById("door1");

The same would apply to all your path variables. They too can be constants.


#7

I realized that it was actually one line before stetim outlined it… there is just not enough space and still problem exists… Idk what is wrong with that. I even checked others code quite the same… Doors have the same behavior just broken imgs :frowning: Is there any bug or I’m still missing something??


#8

Should there be a closedDoorPath?


#10

Well I added it even though there is nothing about it in instructions… It doesn’t work I don’t know why… whether it is assignment bug or something wrong with my code…


#11

For now it looks like this

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

var numClosedDoors = 3;
var openDoor1;
var openDoor2;
var openDoor3;

const randomChoreDoorGenerator = () => {
  let choreDoor = Math.floor(Math.random() * numClosedDoors);
  if (choreDoor === 1) {
    openDoor1 = botDoorPath;
    openDoor2 = beachDoorPath;
    openDoor3 = spaceDoorPath;
  } else if(choredoor === 2) {
    openDoor2 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor3 = spaceDoorPath;
  } else if(choredoor === 3) {
    openDoor3 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
  }
};

door1.onclick = () => {
  doorImage1.src = openDoor1;
};
door2.onclick = () => {
  doorImage2.src = openDoor2;
};
door3.onclick = () => {
  doorImage3.src = openDoor3;
};

randomChoreDoorGenerator();

#13

Since you have the cached node named doorImage1 then that would be the object to attach the listener to.


#14

Sorry, got ahead of things. That will come up so just leave the line in your code.

choreDoor will never be 3. Check for 0, 1, and 2.


#15

Done, after webpage refreshed it worked 4-5 times but after that again just broken images… Should I start from the scratch ? Might it be helpful mtf?


#16

I would also kindly ask you to check my code if you can and mb let me know tomorrow… Coz I’ve been trying to fix this bug for 3 hours or so… gotta get rest and start over… Please do not close this topic yet… and let me know if it works for you!


#17

Let’s get another look at your revised code.