Halp! Why won't this JS work? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 3

Halp! Why won't this JS work?

I wrote this code as a way to practice HTML, CSS, and JS all at the same time, but the JS won't work for some reason! I can't figure it out, so here ya go. If anyone can explain what I've done wrong, it would be greatly appreciated! https://code.sololearn.com/W2VgdkVNxdQd/?ref=app

29th Dec 2017, 3:55 PM
Dutch
Dutch - avatar
11 Answers
+ 8
There were multiple errors: - You forgot to close the onload function. - You tried getting an element by an id, but no element had that id ( it now uses querySelector, but you could also give that element an id). - You forgot to make some variables global ( you created them in the onload function with var, but that limits the scope to that function only). https://code.sololearn.com/W8xS1zWVxgCY/?ref=app
29th Dec 2017, 4:14 PM
The Coding Sloth
The Coding Sloth - avatar
+ 7
It uses the CSS selectors, so: - # searches for an id. - . searches for a class. - nothing searches for the name of an element. The line document.querySelector('h1') will return all the h1 elements (in your code there is only one h1, but if there are multiple ones it will give them all in an array).
29th Dec 2017, 4:36 PM
The Coding Sloth
The Coding Sloth - avatar
+ 5
it is better to post your long code as code in playground and then put it in question 😃
29th Dec 2017, 3:59 PM
Vukan
Vukan - avatar
+ 4
Nice lookin! :) Congrats. But perhaps the text should just bounce around in the box and not have the text scroll off screen?
29th Dec 2017, 4:21 PM
Donald Hoyt
Donald Hoyt - avatar
+ 3
fixed ^-^
29th Dec 2017, 4:02 PM
Dutch
Dutch - avatar
+ 2
looks like your window.onload=function has a missing ending }
29th Dec 2017, 4:07 PM
Donald Hoyt
Donald Hoyt - avatar
+ 2
@The Coding Sloth oh! Thanks! I didn't realize I could do that to variables x.x I also thought that the h1 was the name of the element lol guess it needed an id as well*derps*
29th Dec 2017, 4:18 PM
Dutch
Dutch - avatar
+ 2
what exactly does the query selector do? I only have an understanding based on the SL courses lol x.x
29th Dec 2017, 4:25 PM
Dutch
Dutch - avatar
+ 2
To add a touch of corporate realisme to this practice I will continue with typical QA Pickiness: 1) please change the title tag to reflect a summary of the intent of the page "Happy New Year". 2) please comply with company standards and extract your CSS into an external style sheet .css file and reference it from your .html LOL. ;P
29th Dec 2017, 4:32 PM
Donald Hoyt
Donald Hoyt - avatar
+ 1
I forgot about that lol
29th Dec 2017, 4:00 PM
Dutch
Dutch - avatar
+ 1
@Steve Hoyt fixed! new error now though...still won't move x.x
29th Dec 2017, 4:11 PM
Dutch
Dutch - avatar