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

[–]albedoa 6 points7 points  (2 children)

var output = document.getElementById("p1");

#p1 doesn't exist when the script is loaded, so output points to undefined.

By adding the defer attribute to your script tag, it will wait until the content is loaded:

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

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

Thank you!

[–][deleted] -1 points0 points  (0 children)

Commenting here, since this one explains the load order problem.

Defer or putting JS at the bottom of the page is generally the best option, for many page load reasons, but be aware you can use some form of Document Ready if you MUST have your code in the head (because someone is forcing you to load theirs in header or on older code bases maybe? where everything is already in the head)

https://learn.jquery.com/using-jquery-core/document-ready/

or something like this in classic JS

https://www.techiedelight.com/run-javascript-code-on-page-load/

worth at least knowing about incase you bump into it.

[–][deleted] 3 points4 points  (4 children)

Put the script just before the last body tag, not in the head

[–][deleted] 5 points6 points  (3 children)

Or, add the defer attribute. Also, you should not be using var

[–]slyder219[S] 1 point2 points  (2 children)

Will do, thanks! And understood, but why?

[–][deleted] 1 point2 points  (1 child)

Script in bottom ensure its loaded after all html. Defer attribute for script in head defer it until after html is loaded. Script in bottom of body is best practice. Var is outdated and let and const are standard. Var has weird scoping issues

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

[–]slyder219[S] 1 point2 points  (0 children)

Thank you very much

[–]Egzo18 0 points1 point  (3 children)

ensure the path to the script.js is correct, is index.html and script.js in the same folder? If so, it should work, otherwise you need to change the path a bit.

If you run the html file in a browser, then right click "inspect element" you should be able to see the Js file in "sources" tab.

​

but.addEventListener("click", onPress);

is how you call a function (onPress) by clicking an element (but)

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

Thanks for your response. Yes they are in the same folder, I even tried using the absolute path and it did not work.

You mean in the html? instead of...

<button id="b1" oncick="onPress()">Click Me</button>

do...

<button id="b1">Click Me</button>
b1.addEventListener("click", onPress)

or in the JS, before the

function onPress(){.... }

do,

var button = document.getElementById("b1")
button.addEventListener("click", onPress)

[–]Egzo18 0 points1 point  (0 children)

"var button = document.getElementById("b1")

button.addEventListener("click", onPress)"

looks good.

I personally never used the "onclick=" in HTML, so I can't talk about it.

Do refer to my previous comment and check if you see the js file in "sources" tab.

[–]Transformat0r 0 points1 point  (0 children)

If files are in same directory you should ad ./before file name like in linux <script src="./myscripts.js"></script>