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>

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