Requisito previo: Variables globales y locales en JavaScript
Ámbito local: las variables que se declaran dentro de una función se denominan variables locales y solo se accede a ellas dentro de la función. Las variables locales se eliminan cuando se completa la función.
Ámbito global: se puede acceder a las variables globales desde dentro y fuera de la función. Se eliminan cuando se cierra la ventana del navegador, pero está disponible para otras páginas cargadas en la misma ventana. Hay dos formas de declarar una variable globalmente:
- Declarar una variable fuera de las funciones.
- Asigne valor a una variable dentro de una función sin declararla usando la palabra clave «var».
<!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
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>
</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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón Agregar:
- Después de hacer clic en el botón de restar:
Publicación traducida automáticamente
Artículo escrito por AshaRamMeena y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA