It should be noted when I put the same exact code from the HTML file into the .js file, I get this warning in the console: "TypeError: document.getElementById(...) is null"
Since that line of code worked in your original code, the only explanation that seems to fit is that you have moved the <script>
element.
Previously you had it after the elements you were trying to getElementById
on so they existed in the DOM at the time the script ran. (We can see this in your original code sample)
Now you've moved it somewhere (probably inside the <head>
) so it appears before those elements in the document so they haven't been added to the DOM when it runs. (You haven't shown us the new version of the HTML but this is the most likely explanation).
Move the script back.
Alternatively, put your event handle assignment code in a function and run it once all the elements have been added to the DOM (e.g. in response to a load
or ready
event.