如何使用JavaScript在函数内部更改全局变量的值

在任何编程语言中，根据其访问范围，有两种类型的变量可以声明。局部变量和全局变量。

全局作用域变量 - 全局作用域变量是在代码文件中全局声明的变量，可以被代码块或文件中的任何函数访问。这些变量的作用域是全局的。

局部作用域变量 - 这些是在函数或特定代码块内声明的变量，只能在该代码块内部访问或使用，不能在该代码块外部访问。这些变量的作用域仅限于该特定代码块，因此它们被称为局部作用域变量。

本文中，我们将学习如何在JavaScript的函数中更改代码文件中的全局变量的值。

使用JavaScript在函数内部更改全局变量的值非常简单。在JavaScript中，我们可以使用两种方法来更改全局变量的值，如下所述：

直接更改值。
使用方括号语法更改值。

让我们通过代码示例详细了解这些方法的实际实现。

直接更改值

在此方法中，我们可以通过使用其名称来直接更改全局变量的值来实现。

语法

以下语法将帮助您了解如何直接访问和更改全局变量的值：

var global_variable_name = initial_value;
function() {
   global_variable_name = new_value;
}

让我们通过JavaScript代码示例来了解这种方法的实际实现。

步骤

步骤1 - 在步骤1中，我们将向HTML文档中添加两个不同的输入元素，每个元素的type属性值为number，以获取用户选择的两个数的输入。
步骤2 - 在下一步中，我们将在文档中添加一个带有onclick事件的按钮元素，当用户点击按钮时，调用一个函数。
步骤3 - 在步骤3中，我们将定义一个JavaScript函数，并将其指定为前一步中添加的按钮的onclick事件的值。
步骤4 - 在这一步中，我们将通过用户在输入元素中输入的值来获取这两个值的乘积，并将全局变量的值更改为这两个值的乘积。所有这些操作都在前一步中声明的函数内执行。

示例

下面的示例将演示如何使用JavaScript在函数中更改全局变量的值。

<html>
<body>
   <h2> Change the value of a global variable inside of a function using JavaScript </h2>
   <p id = "upper">The initial value that is assigned to the global variable <b>globe is: 8</b></p>
   <p>Enter any two numbers:</p>
   <input type = "number" id = "inp1"> <br> <br>
   <input type = "number" id = "inp2"> <br> <br>
   <button id = "btn" onclick = "changeVal()">click to change the value</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var globe = 8;
      function changeVal() {
         var inp1 = document.getElementById("inp1");
         var inp2 = document.getElementById("inp2");
         var num1 = Number(inp1.value);
         var num2 = Number(inp2.value);
         var prevGlobe = globe;
         globe = num1 * num2;
         result.innerHTML += " The value of the global variable <b> globe </b> is changed from <b> " + prevGlobe + " </b> to <b> " + globe + " </b> the product of the two numbers <b> " + num1 + " * " + num2 + " </b> entered by you. <br> ";
      }
   </script>
</body>
</html>

在上面的示例中，我们可以清楚地看到，我们每次在名为changeVal()的函数内部将全局变量globe的值从8更改为用户输入的两个数字的乘积。

用方括号语法更改值

这是使用JavaScript更改函数内的全局变量值的另一种方法或语法。在这种方法中，我们将使用方括号语法来访问和更改变量的值，而不是直接访问变量。

语法

下面的语法将向您展示如何使用方括号语法来访问和更改全局变量的值-

var global_variable = initial_value;
function() {
   window['global_variable'] = new_value; 
}

让我们实际实施这种方法，并尝试在代码示例中更改全局变量的值。

步骤

此示例的算法与上一个示例的算法类似。您只需要将函数内部访问变量的语法从直接语法更改为方括号语法。下面的示例将帮助您详细了解必须进行的更改。

示例

下面的示例将向您说明使用方括号语法来访问和更改全局语法的用法-

<html>
<body>
   <h2>Change the value of a global variable inside of a function using JavaScript</h2>
   <p id = "upper">The initial value that is assigned to the global variable <b>globe is: 8</b></p>
   <p>Enter any two numbers:</p>
   <input type = "number" id = "inp1"> <br> <br>
   <input type = "number" id = "inp2"> <br> <br>
   <button id = "btn" onclick = "changeVal()">click to change the value</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var globe = 8;
      function changeVal() {
         var inp1 = document.getElementById("inp1");
         var inp2 = document.getElementById("inp2");
         var num1 = Number(inp1.value);
         var num2 = Number(inp2.value);
         var prevGlobe = window['globe'];
         window['globe'] = num1 * num2;
         result.innerHTML += " The value of the global variable <b> globe </b> is changed from <b> " + prevGlobe + " </b> to <b> " + globe + " </b> the product of the two numbers <b> " + num1 + " * " + num2 + " </b> entered by you. <br> ";
      }
   </script>
</body>
</html>

在这个示例中，我们使用方括号语法来访问和更改全局变量 globe 的值，从初始值改变为两个输入数字的乘积。

在这篇文章中，我们学习了两种不同的方法来将全局变量的值从初始值改变为新值。我们详细讨论了这两种方法，并且使用每种方法的代码示例来看它们的实际实现。