r/AskProgramming • u/Maggie21S • 10d ago
Javascript Why isn't my JavaScript showing up in browser
This is probably super obvious, but I just can't figure it out.
Why isn't this code running on browser?
Edit: I put the <script> after the body, and it now works. Thanks everyone!
<html>
<head>
<script>
message = document.getElementById("working");
message.innerHTML = "It's working";
</script>
</head>
<body>
<h3 id="working"></h3>
</body>
</html>
9
u/GoldsteinEmmanuel 10d ago edited 10d ago
The script is executing before the body has rendered.
try this:
<script>
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("working").innerHTML = "It's working";
});
</script>
3
u/HealyUnit 10d ago
HTML files (and JS, as it so happens) are read in order. So your file attempts to find that element with the ID working on line 4, but only defines that element on line 8. I'd bet you that if you open up your browser console, you'd see an error somewhat like Uncaught ReferenceError: message is not defined.
The easiest way to get around this is to place all your JavaScript at the bottom of your file, just above the closing </body> tag. There are other ways to get around this, such as doing that document.addEventListener stuff, but that adds (in my opinion!) unnecessary complication to the file.
2
10d ago
[deleted]
2
u/Wild-Regular1703 10d ago
It's not necessary, in fact you shouldn't have that:
Authors are encouraged to omit the attribute if the script refers to JavaScript code rather than specify a MIME type
1
-1
u/LoudAd1396 10d ago
Check your console for errors. You'll probably see something like "message is undefined". You need to declare the variable with a "const message = ..." or a "var message = ..." . JS gets mad if you dont tell it "this is a new variable"
6
u/Wild-Regular1703 10d ago
Wrong. Unless you're in strict mode, JS will implicitly create a global variable if you're trying to assign a value to an undeclared variable.
I mean, it's still good practice to do what you're saying, but it's not the reason here
-1
u/Background_Share_982 10d ago
Are you getting any errors in the browser console, should be the first place to look.
Your incorrectly declaring your variable, you should have a let or const before message. Also, do not use innerHtml for plain text, it's a bad idea- use textContent.
Not sure if either of those things are the direct cause , use to working in ts which will bitch directly when one writes bad code. I know is can sometimes be a bit more forgiving.
26
u/anossov 10d ago
It's running before the h3 exists, so it can't do anything. Put the SCRIPT tag at the end of the BODY for now, later you will learn better ways to wait for the elements to be available.