Chore Door Not Working

This project was fine until I started adding more JS functions from step 46 onwards. I don’t know why the HTML isn’t changing or the doors are no longer opening.

The error I’m receiving is:
TypeError: Cannot set property ‘onclick’ of null

Any help would be much appreciated!!

Hi there! Welcome to the community!

Since your error had to do with .onclick, that’s where I looked first. The fact that it says “cannot set property of null” was a bit confusing because it sounded like your document.getElementById() wasn’t working. But no.

The issue is with the function itself. You do this in each one:

if(!isClicked(doorImage1) && currentlyPlaying && !isClicked(door))

Your first two conditions are fine, but the third one won’t work. You are calling !isClicked(door) but where would the argument door come from? Door isn’t a global variable. So this will throw an error.
Try removing this condition from your if statements. Besides, you don’t need it. You are already checking !isClicked(doorImage1 (or 2 and 3 for the other doors).

Thanks so much for your response.

I’ve taken away the 3rd condition, I’m still getting the same error occurring at line 66, and now when I click on the doors they disappear.

Isn’t debugging fun? :sweat_smile:

I copied your code and I wasn’t getting an error in line 66 like you mentioned, but I did notice the doors were disappearing when clicked. So I followed the bread crumbs there.

the onclick handlers are doing this:

doorImage1.src = openDoor1;

So that must be failing if the images are broken. And were are openDoor1, openDoor2, and openDoor3 defined? In your randomChoreDoorGenerator function. That function looks ok, so I placed a console.log there to see if it was being called. It wasn’t.

Who is calling randomChoreDoorGenerator? Here is where we find the problem. You placed the call inside the onclick handler for the start button. That’s not where we want it because we are assuming the user can play before clicking the button. You want to trigger this inside your startRound function. Does that make sense?
The way your code is right now, you only generate what’s behind the doors when startButton.onclick is triggered, and even then, your randomChoreDoorGenerator is inside the if statement that checks if you are currently playing (which, by default we set to true at first). So that if won’t do anything at first because !currentlyPlaying will be false, your randomChoreDoorGenerator then never gets called, and when you click a door there’s nothing to do the openDoor assignments.

Phew… little bug huh? Sometimes you have to pull the thread all the way to find the bug. Like I said, move your randomChoreDoorGenerator out of startButton.onclick and place it at the end of your startRound function.

Next bug! :fire: