如何使用 JavaScript 更改函數內部全局變量的值？-魔扣目錄

可以在任何編程語言中在其訪問范圍的上下文中聲明兩種類型的變量。 局部變量和全局變量。

全局作用域變量 – 全局作用域變量是在代碼文件內全局聲明的變量，可以由文件內的任何代碼塊或任何函數訪問。這些變量的范圍是全局的。

局部作用域變量 – 這些是在函數或特定代碼塊內部聲明的變量，只能在該特定代碼塊內訪問或使用，而不能在該代碼塊外部訪問或使用。這些變量的范圍僅限于特定的代碼塊，這就是為什么這些變量是局部范圍的變量。

在本文中，我們將了解如何使用 JavaScript 更改函數內代碼文件中全局變量的值。

使用 JavaScript 更改函數內全局變量的值非常簡單。在 JavaScript 中，我們可以通過兩種方式更改全局變量的值，如下所示 –

直接更改值。

使用方括號語法更改值。

讓我們借助代碼示例詳細了解這些方法的實際實現。

直接更改值

在這個方法中，我們可以直接改變全局變量的值，通過使用全局變量的名字來給它賦值。

語法

以下語法將幫助您了解如何直接訪問和更改全局變量的值 –

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

登錄后復制

讓我們借助 JavaScript 代碼示例來了解此方法的實際實現。

算法

步驟 1 – 在第一步中，我們將向 HTML 文檔添加兩個不同的 input 元素，每個元素的 type 屬性值為 number，以獲取兩個數字輸入來自他們選擇的用戶。

步驟 2 – 在下一步中，我們將在文檔中添加一個按鈕元素，并使用 onclick 事件，該事件接受一個函數，并在用戶單擊按鈕時調用它。 p>

步驟 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>

登錄后復制

在上面的示例中，我們可以清楚地看到，我們將全局變量 globe 的值從 8 更改為由用戶每次在名為 changeVal() 的函數內。

用于更改值的方括號語法

這是使用 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 的值并將其從初始值更改為兩個輸入數字的乘積。

在本文中，我們了解了將全局變量的值從初始值更改為某個新值的兩種不同方法。我們通過每種方法的代碼示例詳細討論了這兩種方法，以了解它們的實際實現。

以上就是如何使用 JavaScript 更改函數內部全局變量的值？的詳細內容，更多請關注www.92cms.cn其它相關文章！