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

Pre-requisite: Global and Local variables in JavaScript

Local Scope: Variables which 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 is 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 value to a variable inside a function without declaring it using “var” keyword.
filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to change the value of a global
        variable inside of a function using
        JavaScript?
    </title>
      
    <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
      
            // Use global variables to subtract numbers
            var result = globalFirstNum2-globalSecondNum2;
              
            var output = "Difference of 2 numbers is " + result;
            document.getElementById("result").innerHTML = output;
        }
    </script>
</head>
  
<body style="text-align:center;">
      
    <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>
</body>
  
</html>

chevron_right


Output:

  • Before clicking the button:
  • After clicking add button:
  • After clicking subtract button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.