Global var is not defined inside JavaScript function when calling in onClick

Question

In HTML form, I want to display the user input when a button is clicked. This is done by calling a JavaScript function. The user input is hold into a variable which then is used inside a function. The problem, the function doesn't recognize the var unless it's defined inside it.

The following is the HTML and JS code. To view (https://dl.dropboxusercontent.com/u/4301151/stackoverflow/varNoDefined.html)

<p><label>Name:</label>
<input type="text" name="userName" id="userName" placeholder="e.g John Lewis"/> 
</p>
    
<input type="submit" name="submitButton" value="Display" onclick="run()"/>
<p>Name Provided: <label id="outputUserName"></label></p>


var userName =  document.getElementById("userName").value;
function run() {document.getElementById("outputUserName").innerHTML = userName;}

It will work fine if I have the following inside the function:

document.getElementById("outputUserName").innerHTML = document.getElementById("userName").value;

or if I define the var inside the function

I need the var to be global so to use it with other functions and not define it so many times

score 2 · Answer 1 · edited May 23 '17 at 10:33

2

The problem, the function doesn't recognize the var unless it's defined inside it.

No that is not the problem. The variable is recognized, but it doesn't have the value you want.

You are trying to read the value of the input before the user typed anything. userName will simply hold an empty string. You can easily verify this by giving the input a default value:

<input type="text" name="userName" id="userName" value="default value"/>

DEMO

You have to read the value at the moment you need / want it. As compromise, you can keep a reference to the DOM element as global variable:

var userName =  document.getElementById("userName");
function run() {
    document.getElementById("outputUserName").innerHTML = userName.value;
}

Also relevant: Why does jQuery or a DOM method such as getElementById not find the element?

edited May 23 '17 at 10:33

Community

1
1

answered Oct 25 '14 at 00:36

Felix Kling

795,719
175
1,089
1,143

thank you for answering. I'm new to JS and some of the things in the link provided I didn't understand. I’m not using any JS inside HTML but in a separate file. Tried to do what you did there but the code seems not working! – Moafaq Oct 25 '14 at 10:17
now the code work if I load the var and read the value at the time I need it: window.onload = function() { var userName = document.getElementById("userName");}; function run() {document.getElementById("outputUserName").innerHTML = userName.value; } – Moafaq Oct 25 '14 at 10:27
In your example the variable is local to the onload handler. The easiest solution is to simply include your script at the end of the page. That's also explained in the linked question. – Felix Kling Oct 25 '14 at 15:38

score 0 · Answer 2 · answered Oct 25 '14 at 00:45

0

Another issue is that you need to load the script tag after the body content or put all your code inside of an on ready function so that you know that the page has been rendered. With the script before the actual element, the lookup for document.getElementById("userName"); returns null because the element hasn't been rendered by the browser yet. If you look in your console you should see that.

Uncaught TypeError: Cannot read property 'value' of null

answered Oct 25 '14 at 00:45

grdaneault

830
1
11
21

Thanks for answering, tried loading the JS file using: $(document).ready(function() but it doesn’t seem to work However, when I tried this: window.onload = function() { } and put my var inside it, it loads and work (it was taken from the link Felix provided) – Moafaq Oct 25 '14 at 10:23

Global var is not defined inside JavaScript function when calling in onClick

2 Answers2