JavaScript Events not working? Or am I to blame?

Question

This not the first of my problems but the latter is just one of them.

TypeError: Cannot set property 'onclick' of null

EDIT:

This is the link to the file: https://repl.it/@victornnah689/TintedDeadBadger

Answer 1

I'll take a look at it, but could you possibly post a link to your current updated code?

EDIT: NVM it looks like you updated the JS file, but have yet to have moved the script section to the bottom of the body in your HTML. You need to move it so that it loads the JS file after the DOM has been created or else the objects below it in the HTML file don't exist when the JS file is ran. This is why the Page Location: is at the top of the page when it should be at the bottom!

Also remove the parentheses from the onclick="checkGuess();" so that it looks like:
<input type="submit" value="Submit guess" class="guessSubmit" onclick="checkGuess">
The parens are making it call the function twice.

After doing both of the above I don't receive any errors and your code seems to work fine.

Answer 2

@ChaoticDawg Sorry to bother you but the errors just keep coming. could you please revise my code, I'm not the best when it comes to web development.

Answer 3

Thank you very kindly. I really appreciate your detailed answer.

Answer 4

In your html move your script to the bottom of the body just before the body closing tag, like:

<script src="index.js"></script>
</body>

In your index.js file you need to correct lines 7 to:

var guessSubmit = document.querySelector('.guessSubmit'); // missing the . to indicate a class so returned null

And also add a semi colon to the end of line 93:

header.focus();