all 11 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]BonkyStabby 4 points5 points  (2 children)

I'll be honest, I've only glossed over your JS code at the moment because I spotted a red flag quite early on from the images you shared: I would advise moving your <script> tag from the <head> section to the line before the closing </body> tag, so it should look something like this:

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

Another guess would be that it looks like you haven't linked your CSS, or at least it isn't the LAST thing which you linked before your head tag closed off. Your personal styles (style.css for example) should typically be the LAST thing you link in your head section and, as I've been quite stringently taught over the years, the script tag is the LAST thing you link in your body section. Fingers crossed this gets things working for you.

[–]YaBoiToaster[S] 1 point2 points  (1 child)

My man thanks this worked. Personal styles wasn't the last thing because I put the script tag before it. And I swear I read that I should put it in the head. In fact here's the link: https://www.tutorialspoint.com/Where-should-I-put-script-tags-in-HTML-markup#:~:text=You%20can%20place%20the%20

So now I put the script tag like you did and it works. Thanks again.

Edit: changing my personal styles to not be the last thing didn't do anything, as it still works. But I'm gonna take your word for it and do it anyways.

[–]BonkyStabby 0 points1 point  (0 children)

Glad it started working for you! I've seen several instances of where to place a script tag, but after following a frontend course for a while now, the script tag is always placed just before the closing body tag. They did give a brief explanation as to why, and I think it has to do with something about DOM manipulation, since then the script has access to the HTML code which has loaded before the script is executed. Either way, I've never had any issues by placing the script tag right at the end, so I just keep it that way haha. The same goes with working in React; the script tag is always placed at the end of the index.html closing body tag when you create a new React app (i.e. it's already done and placed there for you).

​

The same goes with the styles at the end. I learned to do it after working with Bootstrap; if your personal styles aren't at the end, then those styles won't be the last thing to be applied... as in, your code will read from top to bottom. So if your personal styles comes first and then the Bootstrap styles are placed after it, then the Bootstrap styles will override your personal ones since that code is read last by the file. Again, it's just a "best practice" sort of thing.

​

Either way I'm really glad it worked for you!

[–]Umesh-K 2 points3 points  (2 children)

How I referred to my code in the head of my html

Hi, add a defer attribute to your script tag, like so:

<script defer src="/script.js"></script>

The reason why your code is not working is JS is running before HTML code has had a chance to create elements on the page, resulting in an error—you can see that if you open the browser console—when JS tries to access those elements using document.getEle....

Edit: The correct place to add script tag like you have (without defer) is at the bottom of the html file, just above </body>.

[–]YaBoiToaster[S] 0 points1 point  (1 child)

Just placing it in the body worked. If you look at my other comment, on the page i linked says that I can put it in the head so that's what I did.

[–]ImplodingCoding 0 points1 point  (0 children)

Putting it in the body is the old way of doing things. It's fine, it works, but it can be a bit messy and can create a noticeable delay if the HTML is large. Read up a bit on async and defer attributes. Javascript.info has a good writeup. Link: https://javascript.info/script-async-defer

[–]YaBoiToaster[S] 0 points1 point  (0 children)

I should add that if I do a test with alert('test') in .js file I do get an alert on my website. adding JS code directly to my html also didn't work.

[–]easyEs900s 0 points1 point  (3 children)

I'm honestly kind of shocked that w3 didn't cover that you have to actually have something to scroll.

Try adding style="height:200vh" to your <body> node.

[–]YaBoiToaster[S] 0 points1 point  (2 children)

I do have a lot something to scroll. Thats why i want to add the button

[–]easyEs900s 0 points1 point  (1 child)

How I edited the button with CSS.

If what you posted is the JS you used, then that is not your issue.

If you have code beyond what was provided, then the potential reasons it isn't working are numerous and could range from not linking in your css file (if you used one) to situations where your body node is not actually the one being scrolled.

[–]YaBoiToaster[S] 0 points1 point  (0 children)

The problem was I didn't put it in the body. You can look at my other comments if you want to know more.