Hello everybody.
if I put everything into a html file, I get errors from the javascript loading before the html.
so I will get getElementById(“inputbox”).value is a null value because the javascript loaded before the body.
likewise if there are vars that I need built on startup and its in the body tag it will say that vars are undefined.
another problem that I see is that on most of the projects with code pen I can put
document.getElementById("button).onclick=func();
and it will launch when I click the button. but when I do it from a local HTML page it will launch func() on load and not launch when I click the button.
I have to put
document.getElementById("button).onclick=function(){func();}
should I set two script tags in <head> and <body>?
should I just be putting script tags in the <body>?
or entirely separate or include .js file?
I feel if there is something I’m missing here.
<head>
<style>
body{
background-color:#777;
}
#results{
color:red;
width:100%;
background-color:#fff;
}
</style>
<script language="javascript">
function factors(num){
document.getElementById("results").innerHTML=""+num;
}
var x=document.getElementById("box").value;
document.getElementById("go").onclick=function(){factors(x);}
</script>
</head>
<body>
<input id="box">
<button id="go" >GO!</button>
<div id="results">aaa</div>
</body>
current error is that value is null.
Without going into the specifics of you code, you should put the script tags immediately before the closing tag. Try that first.
You can just put the onclick directly on the button in HTML.
Then all you need is to set the value of the output to the value of the box.
Example: https://codepen.io/JohnnyBizzel/pen/xYjPvg
Just to clarify MrDjango is talking about moving your script tag until just before the </body> tag. This is a common practice. If you put the JS in the head section, your JS loads before the page. But you want it to load after your HTML. You want this for two reasons:
- For exactly the reason you’ve encountered.
- So the page doesn’t wait for JS to load before displaying HTML
Generally you want the CSS in the head (so the HTML gets styled) and put the JS at the end of the body. There are other approaches, but this is the most common.
1 Like
document.getElementById("button").onclick=func();
I’m assuming that the code you’re using in your project is properly closing the strings in getElementById, but in case you copied and pasted that code into your forum post, you ought to go fix that.
When you assign func() to a click handler (or any variable at all), you’re assigning the output of the function func(). The parentheses mean that you’re calling the function. If you want your click handler to run the function func, then give it the reference without the parentheses.
document.getElementById("button").onclick=func; // << no parens
1 Like
Okay,
But then how would I pass a value to it? Say function(someFormData)? Would best practice be to build another function to college the data then launch it?
Like
function launcher(){
Var x=..("box").value;
function(x);
}
Wrapping functions just as you have been doing is perfectly acceptable.
document.getElementById("go").onclick=function(){factors(x);}
It isn’t always the most readable, however, and you can quickly find yourself writing brittle code. I would get into this more, but reading your post it seems you expect the variable x to be the value of your element #box at the time you click your button. This is not going to happen. The reason you’re seeing a null value is because the value is null at the time this code is executed
var x=document.getElementById("box").value;
It doesn’t change just because the value changes. You need to get the value each time you want to operate on it. Easy fix, just call that same code inside your function.
function func() {
var x = document.getElementById("box").value;
console.log(x); // this will show the proper value
// do other things here
}
document.getElementById("go").onclick = func;
onClick is a bad practice, use addEventListener