comment utiliser une variable globale dans une fonction en javascript?

Je veux utiliser les variables globales 'x, y' dans la fonction ci-dessous.comment utiliser une variable globale dans une fonction en javascript?

il fonctionne quand je mets les variables dans la fonction

<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<script type="text/javascript"> 

    var x = document.getElementById('field_one').value 
    var y = document.getElementById('field_two').value 

    function calculator() 
     { 
      var p = x * y; 
      alert(x + " times " + y + " is " + p); //shows undefined times undefined is NaN 
     } // calculator() 


</script> 
</head> 

<body> 
<p>This is a simple calculator.</p> 
<form name="the_form"> 
     Number 1: <input type="text" value="" id="field_one"/> <br /> 
     Number 2: <input type="text" value="" id="field_two"/> <br /> 
<input type="button" value="multiply them!" onclick="javascript:calculator()"/> 
</form> 
</body> 
</html>

Source

2016-09-24 Omar

* "Je veux utiliser des variables globales ..." * <- pourquoi ...... la meilleure chose serait de obtenir les éléments ** dans ** la fonction, quand ils sont réellement disponibles, de sorte que vous avez déjà la réponse à cette question? Si cela ne vous convient toujours pas, déplacez le script vers la droite avant ''. – adeneo

vous avez raison, mais je veux aussi utiliser les variables dans d'autres fonctions, de sorte que je n'ai pas à déclarer les variables à nouveau – Omar

Ensuite, vous déplacez le script après les éléments que vous essayez d'obtenir, afin qu'ils puissent être obtenus et pas seulement retourner 'null' – adeneo

Votre code fonctionne. Mais vous courez dans un problème de course. Vous essayez de trouver des éléments, avant leur création:

var x, y; 
window.onload = function() { 
    x = document.getElementById().value; 
    y = document.getElementById().value; 
}

Si votre site se charge pendant une longue période, l'utilisateur peut essayer de lancer le script de calcul avant x et y sont fixés. La solution:

var x, y, calculator; 
calculator = function() { 
    alert("please wait, until the site is completely loaded"); 
}; 
window.onload = function() { 
    x = document.getElementById().value; 
    y = document.getElementById().value; 
    calculator = function() { 
     alert(x + " times " + y + " is " + x * y); 
    }; 
}

Source

2016-09-24 15:34:21

Le problème est que vous voulez obtenir la valeur de x et de y mais ils ne sont pas la valeur établie quand la fonction est appelée. Si vous voulez utiliser les variables plusieurs fois, vous devez créer une fonction (j'ai appelé setValues ) qui est responsable de définir la valeur de x et y avec la valeur d'entrée, et toujours vous devez obtenir les valeurs d'entrée vous pouvez l'appeler. Quelque chose comme ceci:

var x; 
 
var y; 
 

 
function setValues() { 
 
    x = document.getElementById('field_one').value; 
 
    y = document.getElementById('field_two').value; 
 
} 
 

 
document.getElementById("calc").addEventListener("click", function() { 
 
    setValues(); 
 
    var p = x * y; 
 
    alert(x + " times " + y + " is " + p); 
 
}, false);

<p>This is a simple calculator.</p> 
 
<form name="the_form"> 
 
     Number 1: <input type="text" value="" id="field_one"/> <br /> 
 
     Number 2: <input type="text" value="" id="field_two"/> <br /> 
 
<input type="button" id="calc" value="multiply them!" /> 
 
</form>

Source

2016-09-24 16:04:24

Positionnement votre script après le contenu .html garantit que tout est défini au moment où vous voulez travailler le script.
Vous pouvez déclarer des variables globales à partir d'une portée locale en n'utilisant simplement pas 'var' lors de la déclaration. N'oubliez pas de terminer chaque instruction avec un ';'

De cette façon, votre code est 100% fonctionnel:

<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 

</head> 

<body> 
<p>This is a simple calculator.</p> 
<form name="the_form"> 
     Number 1: <input type="text" id="field_one"/> <br/> 
     Number 2: <input type="text" id="field_two"/> <br/> 
<input type="button" value="multiply them!" onclick="readFields();"/> 
    <script type="text/javascript"> 

     function readFields(){ 
    x = document.getElementById('field_one').value; 
    y = document.getElementById('field_two').value; 
      calculator(); 
     } 

    function calculator(){ 

      var p = x * y; 
      alert(x + " times " + y + " is " + p); //shows undefined times undefined is NaN 
     } // calculator() 


</script> 
</form> 
</body> 
</html>

Source

2016-09-24 16:08:14 adr1Script

et si je veux ajouter un autre bouton pour la division et faire une autre fonction, par exemple une fonction pour multiplier et un pour diviser, comment devrais-je faire cette! – Omar

Il existe de nombreux tutoriels sur la façon de développer une calculatrice. – adr1Script

comment utiliser une variable globale dans une fonction en javascript?

Répondre

Questions connexes