Scope Example

HTML

Enter      Number: <input type="textbox" id="anumber" value="1" /><br/>

<input type="button" value="Show Global" onclick="showGlobal();" />
<input type="button" value="Show Global Read Inside Function" onclick="showGlobalReadLocal();" /><br/>
<input type="button" value="Show Local" onclick="showLocal();" />
<input type="button" value="Show Function Call" onclick="readValueAndCallDisplayValue();" />


<div id="output"></div>

JavaScript

var global_anumber = document.getElementById("anumber").value;

function showGlobal()
{
    document.getElementById("output").innerHTML = "Global Declared Variable: global_anumber<br/>Value: " + global_anumber;
}

function showGlobalReadLocal()
{
    global_anumber = document.getElementById("anumber").value;
    document.getElementById("output").innerHTML = "Global Declared Variable: global_anumber<br/>Value: " + global_anumber;
}

function showLocal()
{
    var local_anumber = document.getElementById("anumber").value;
    document.getElementById("output").innerHTML = "Local Declared Variable: local_anumber <br/>Value: " + local_anumber;
}

function readValueAndCallDisplayValue()
{
   var local_anumber = document.getElementById("anumber").value;
   displayValue("local_anumber", local_anumber);
}

function displayValue(var_name, anumber)
{
    document.getElementById("output").innerHTML = "Local Declared Variable: " + var_name +"<br/>Value: " + anumber;
}