Lucas1;1228413 wrote:
Also I wouldn't write the javascript in the same file as the HTML. It's a bad habit.
actually it's a very good habit when posting questions here to include all the relevant information (rendered html, js and css) in the one code block. It saves people having to ask to see other bits and makes it easier to test your code. Once you have your code working you can do what you like with it.
I've never been hugely swayed by the separation of concerns arguments. If you are working on large frameworks with multiple pages depending on the same external files, of course it makes sense. But to create a separate js file for a few lines of code seems unnecessarily dogmatic.
What is important is not to put javascript in the head, either as an external file or a code block. It will slow down the loading of the page (as the script has to be read before the html is rendered) and make it necessary for any script accessing html elements on page load to be wrapped in a window onload function. The best place for javascript - either inline or as an external file reference - is just before the closing </body> tag