var hours = document.getElementById("hrs").value; // Global variables declared
var mins = document.getElementById("min").value;
var seconds = document.getElementById("sec").value;
function random()
{
alert(hours);
alert(mins);
alert(seconds);
}
The output results as undefined
in all 3 cases.
This is because global variables are easily overwritten by other scripts. Global Variables are not bad and not even a security concern, but it shouldn't overwrite values of another variable. On the usage of more global variables in our code, it may lead to a maintenance issue.
The reason the first alert is undefined is because you re-declared global as a local variable below it in the function. And in javascript that means from the top of the function it is considered the local variable.
Global ScopeGlobal variables can be accessed from anywhere in a JavaScript program. Variables declared with var , let and const are quite similar when declared outside a block.
This particular code might be within the body of the HTML file and this code is executed before the particular HTML elements are created. So, the the value undefined
is assigned to those values.
So, you might want to move the value assignment part within the function itself.
var hours, mins, seconds;
function random()
{
hours = document.getElementById("hrs").value;
mins = document.getElementById("min").value;
seconds = document.getElementById("sec").value;
alert(hours);
alert(mins);
alert(seconds);
}
Note 1: Normally, if you don't use a library like jQuery, code like this is put in onload
. This is what MDN has to say about, when onload is triggered
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.
So, if you are getting values from the HTML elements, you might want to make sure that we fetch values from them only after the HTML document is completed loaded.
Note 2: Apart from this, you might want to check if you have really set the id
of the HTML elements with hrs
, min
and sec
properly. name
and id
attributes are actually used for different purposes.
I had a similar issue recently on a server side script.
This was because I was redeclaring the variable inside the function using var. Getting rid of var fixed the issue.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With