All Doors Locked

Projects
,
22

Yes, and in your startRound function.

23

Changing those over didn’t do anything.

24

Can we again see an updated version of your code? Maybe you could make a codepen or a jsbin to make life easier for yourself?

25

I ran your code in the online course and I am experiencing no issues at all. Code is running fine and working as expected.

26

Well it seems to work fine in codepen as well. Now I am thinking there is something wrong with my computer itself or something. Here is the link to it in Codepen

27

here:

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

you have door1, which seems to be an undefined variable. This now should be doorImage1

28

Should they all be like that or just certain ones?

29

doorImage1 is the variable containing your image element, you want to check if this element is clicked and other things

you should really think through the logic, what do you try to do here? Which code is responsible for that?

30

Okay I think I am missing something in the logic. I changed this here:

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

to:

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

Is that what you’re saying because as I am thinking through it, it’s what makes sense. However I have to be missing something here. I am just not sure where.

31

Did you apply this for onclick doorImage2 and 3 as well?

32

Yes I was sure to modify those the same way.

33

i am a [email protected]#$ idiot. Sorry that you had to put up with me

anyway, the problem is here:

<!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">
    <script type="text/javascript" src="script.js"></script>
  </head>

a html document is read from top to bottom, so now the JS script is loaded before the doors are rendered in html, resulting in getElementById being unable to find the html element (which aren’t rendered yet)

put the script tag after your body closing tag:

</body>
<script type="text/javascript" src="script.js"></script>

the reason your code works on codepen and jsbin is that theses link the JS to the html for you. Obviously after the html is rendered.

1 Like
34

That did it! Thank you so much! I can’t tell you how much I appreciate you guys taking the time to help me out.

35

i should have found it a lot sooner. Good to hear we (eventually) solved it :slight_smile:

1 Like
36

This topic was automatically closed 18 hours after the last reply. New replies are no longer allowed.