how to use a global variable inside a function in javascript?

Question

I want to use global variables 'x, y' in the below funcion.

it works when I put the variables inside the function

<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">

    var x = document.getElementById('field_one').value
    var y = document.getElementById('field_two').value

    function calculator()
        {
            var p = x * y;
            alert(x + " times " + y + " is " + p); //shows undefined times undefined is NaN 
        } // calculator()


</script>
</head>

<body>
<p>This is a simple calculator.</p>
<form name="the_form">
       Number 1: <input type="text" value="" id="field_one"/> <br />
       Number 2: <input type="text" value="" id="field_two"/> <br />
<input type="button" value="multiply them!" onclick="javascript:calculator()"/>
</form>
</body>
</html>

*"I want to use global variables..."* <- why ...... the proper thing would be to get the elements **inside** the function, when they are actually available, so you already have the answer to this question? If that still doesn't do it for you, move the script down to right before `
`. — adeneo, Sep 24 '16 at 15:27
you are right, but I wanna use the variables in other functions as well, so that I don't have to declare the variables again — csse, Sep 24 '16 at 15:30
Then you move the script after the elements you're trying to get, so they can be gotten and not just return `null` — adeneo, Sep 24 '16 at 15:33
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — JJJ, Sep 24 '16 at 15:36

score 0 · Accepted Answer · edited Sep 24 '16 at 16:49

Your code works. But youre running in a race problem. You try to find Elements, before they are created:

var x, y;
window.onload = function() {
    x = document.getElementById().value;
    y = document.getElementById().value;
}

If your site is loading for a long time, the user may try to start the calculator script before x and y are set. Solution:

var x, y, calculator;
calculator = function() {
    alert("please wait, until the site is completely loaded");
};
window.onload = function() {
    x = document.getElementById().value;
    y = document.getElementById().value;
    calculator = function() {
        alert(x + " times " + y + " is " + x * y);
    };
}

score 0 · Answer 2 · answered Sep 24 '16 at 16:04

The problem is as you want to get the value of x and y but them doesn't are setted value when function is called. If you want to use the variables many times, you need the create a function (I called setValues) that is responsible the set the value of x and y with the value of input, and always you need to get the values of input you can call it. Something like this:

var x;
var y;

function setValues() {
    x = document.getElementById('field_one').value;
    y = document.getElementById('field_two').value;
}

document.getElementById("calc").addEventListener("click", function() {
    setValues();
    var p = x * y;
    alert(x + " times " + y + " is " + p);
}, false);

<p>This is a simple calculator.</p>
<form name="the_form">
       Number 1: <input type="text" value="" id="field_one"/> <br />
       Number 2: <input type="text" value="" id="field_two"/> <br />
<input type="button" id="calc" value="multiply them!" />
</form>

score 0 · Answer 3 · answered Sep 24 '16 at 16:08

Positioning your script after the .html content guarantees everything is defined at the time you want the script working.
You can declare global variables from a local scope simply not using 'var' on declaration.
Do not forget to end each statement with a ';'

This way, your code is 100% functional:

<html>
<head>
<meta charset="utf-8">
<title></title>

</head>

<body>
<p>This is a simple calculator.</p>
<form name="the_form">
       Number 1: <input type="text" id="field_one"/> <br/>
       Number 2: <input type="text" id="field_two"/> <br/>
<input type="button" value="multiply them!" onclick="readFields();"/>
    <script type="text/javascript">

        function readFields(){
    x = document.getElementById('field_one').value;
    y = document.getElementById('field_two').value;
            calculator();
        }

    function calculator(){

            var p = x * y;
            alert(x + " times " + y + " is " + p); //shows undefined times undefined is NaN 
        } // calculator()


</script>
</form>
</body>
</html>

what if i want to add another button for division and make another function, for example a function for multiply and one for divide, how should i do that! — csse, Sep 24 '16 at 16:17

how to use a global variable inside a function in javascript?

3 Answers3