So I am new to javascript and arrays are too complicated to learn so I am sticking to just single variables. I can’t tell whats wrong with the code. It should be running. Also are there any good free IDEs I can use to debug my code? Thanks.
If you want to have the best chance of the JavaScript to work, you should first make sure the HTML it is working with is good.
If you go to https://validator.w3.org/#validate_by_input and paste in all of your <html> to </html> (the entire page) and test it you will see there are quite a few problems with it.
Some may be more important to fix in terms of the JavaScript code, but try to fix the HTML as best you can.
Actually you can see the error if you just open the console of your browser dev tools. As for free IDEs, the two probably most capable free text editors are Atom and VS Code… and with the right extensions you can get them pretty close to an actual IDE. Personally I prefer VS code as it’s faster and has better JS integration out of the box… I’m actually even using it at work myself.
As for the invalid HTML, I assume you placed the head after the body so that the #canvas element is available from the start? Now it’s common practice to put your scripts inside the body (which is perfectly valid too), preferably at the very end so that the entire document got rendered when the scripts run, and the user also doesn’t have to wait for the scripts to download until they can see the page.
The thing is, modern browsers are pretty good at guessing what the HTML should actually look like and render it accordingly. It can still lead to hard to find bugs in the JS, e.g. when you’re trying to query for an element where the corresponding markup is not well-formed… so you should really pay attention to that.
They are, but there’s a problem in your if and while conditions (the latter causing the page to hang completely): you’re assigning values to point_counter, and point_counter = 1 will always evaluate to true (and point_counter = 0 to false), so the while loop will run infinitely. For an equality check, use the === operator.