Skip to content
Related Articles
Open in App
Not now

Related Articles

How to change the value of a global variable inside of a function using JavaScript ?

Improve Article
Save Article
Like Article
  • Last Updated : 26 Dec, 2022
Improve Article
Save Article
Like Article

Pre-requisite: Global and Local variables in JavaScript 

Local Scope: Variables that are declared inside a function is called local variables and these are accessed only inside the function. Local variables are deleted when the function is completed. 

Global Scope: Global variables can be accessed from inside and outside the function. They are deleted when the browser window is closed but are available to other pages loaded on the same window. There are two ways to declare a variable globally:

  • Declare a variable outside the functions.
  • Assign a value to a variable inside a function without declaring it using the “var” keyword.

Example: In this example, we will define global variables with user input and manipulate them from inside the function

HTML




<body>
    <h1 style="color:green">
        GeeksForGeeks
    </h1>
 
    <b>Enter first number :- </b>
    <input type="number" id="fNum">
 
    <br><br>
 
    <b>Enter second number :- </b>
    <input type="number" id="sNum">
 
    <br><br>
 
    <button onclick="add()">Add</button>
    <button onclick="subtract()">Subtract</button>
 
    <p id="result" style="color:green; font-weight:bold;">
    </p>
    <script>
        // Declare global variables
        var globalFirstNum1 = 9;
        var globalSecondNum1 = 8;
             
        function add() {
             
            // Access and change globalFirstNum1 and globalSecondNum1
            globalFirstNum1 = Number(document.getElementById("fNum").value);
            globalSecondNum1 = Number(document.getElementById("sNum").value);
                 
            // Add local variables
            var result = globalFirstNum1 + globalSecondNum1;
             
            var output = "Sum of 2 numbers is " + result;
             
            // Display result
            document.getElementById("result").innerHTML = output;
            }
            // Declare global variables
            globalFirstNum2 = 8;
            globalSecondNum2 = 9;
             
             
        function subtract() {
            // Access and change globalFirstNum2
            // and globalSecondNum2
         
                globalFirstNum2 = Number(document.getElementById("fNum").value);
                globalSecondNum2 = Number(document.getElementById("sNum").value);
             
             
            // Use global variables to subtract numbers
            var result = globalFirstNum2-globalSecondNum2;
             
            var output = "Difference of 2 numbers is " + result;
            document.getElementById("result").innerHTML = output;
        }
    </script>
</body>


Output:

 


My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!