dom - global var is not defined inside JavaScript function when calling in onClick -

dom - global var is not defined inside JavaScript function when calling in onClick -

in html form, want display user input when button clicked. done calling javascript function. user input hold variable used within function. problem, function doesn't recognize var unless it's defined within it.

the next html , js code. 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 work fine if have next within function:

document.getelementbyid("outputusername").innerhtml = document.getelementbyid("username").value;

or if define var within function

i need var global utilize other functions , not define many times

thank you.

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

no not problem. variable recognized, doesn't have value want.

you trying read value of input before user typed anything. username hold empty string. can verify giving input default value:

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

demo

you have read value @ moment need / want it. compromise, can maintain reference dom element global variable:

var username = document.getelementbyid("username"); function run() { document.getelementbyid("outputusername").innerhtml = username.value; }

also relevant: why jquery or dom method such getelementbyid not find element?

javascript dom javascript-events