Javascript: Warum wird Variable lokal arbeiten, aber nicht global

Ich bin neu in JavaScript und habe Probleme zu verstehen, warum eine Variable verwendet werden kann, wenn es innerhalb einer Funktion (lokal), aber nicht außerhalb (global) deklariert wird.Javascript: Warum wird Variable lokal arbeiten, aber nicht global

Zum Beispiel: https://jsfiddle.net/Buleria28/kqu69aqt/

Oder wenn es einfacher ist, hier zu sehen. Warum wird diese Arbeit ?:

function numDisplay(){ 
var e = document.getElementById("numVal").value; 
document.getElementById("show").innerHTML = e; 
} 

document.getElementById("calcBtn").addEventListener("click",numDisplay);

und warum nicht diese Arbeit ?:

var e = document.getElementById("numVal").value; 
function numDisplay(){ 
document.getElementById("show").innerHTML = e; 
} 

document.getElementById("calcBtn").addEventListener("click",numDisplay);

Die entsprechende HTML ist:

<form method = "POST"> 
<fieldset>   
<label for="numVal">Enter Number Value:</label> 
<input type="number" id="numVal" name="numVal"/> 
</fieldset> 
</form>

ich neugierig bin, weil ich möchte verwenden die Benutzereingabe für in der Variable "e" in verschiedenen Funktionen gefunden.

Quelle

2017-06-10 user3063771

Im Fall von:

var e = document.getElementById("numVal").value; 
function numDisplay(){ 
    document.getElementById("show").innerHTML = e; 
} 
document.getElementById("calcBtn").addEventListener("click",numDisplay);

e zur Laufzeit berechnet wird, so dass der Wert ist nichts, das dann gespeichert als e (Ihr Startwert.) Wenn Sie jedoch eine kleine Änderung an Ihrem Code vornehmen, kann dies funktionieren.

var e = document.getElementById("numVal"); 
function numDisplay(){ 
    document.getElementById("show").innerHTML = e.value; 
} 
document.getElementById("calcBtn").addEventListener("click",numDisplay);

In dem Wert dieses Beispiel e auf jeden Klick gefunden, die dann den aktuellen Wert anzeigt und festgelegt, dass als innerHTML- Ihres ‚Show‘ Elements.

Quelle

2017-06-10 17:47:27 Shadowfool

Das Problem liegt vor, wenn der Skriptcode ausgeführt wird. Wenn Sie eine globale Variable wie folgt festgelegt und es ist null

var e = document.getElementById("numVal").value;

Dann ist es wahrscheinlich ausgeführt, bevor der Browser, dass ein Teil der Seite erstellt.

können Sie globale Variablen verwenden, die Sie auf diese Weise zu einer Nummer oder Zeichenfolge festgelegt, da diese nicht auf der Seite/Dokument abhängen:

var number_of_puffins = 11;

Wenn Sie eine Variable wollen einen Teil des Dokuments Punkt Sie müssen über eine Funktion verfügen, um es nach dem Vorhandensein der Seite einzurichten.

<body onLoad="setglobals();">

Seien Sie vorsichtig bei der Verwendung von Code wie in Ihrem Beispiel, da sich die Seite ändern kann, wenn Sie Elemente hinzufügen oder löschen.

Quelle

2017-06-10 17:46:33

Beide Optionen funktionieren wie geplant.

Der Unterschied ist der Wert.

Wenn Sie das Skript zum ersten Mal ausführen, gibt es keinen Wert in der Eingabe, aber wenn Sie es innerhalb der Funktion ausführen, hat es bereits Wert.

Sie ändern, wenn Sie den Wert fordern, das heißt:

var e = document.getElementById("numVal"); //Remove the .value 
/*why won't having the variable above rather than inside 
the function work?*/ 

function numDisplay(){ 
//var e = document.getElementById("numVal").value; 
document.getElementById("show").innerHTML = e.value; //use it here. 
} 

document.getElementById("calcBtn").addEventListener("click",numDisplay);

Quelle

2017-06-10 17:47:11

Die Funktion numDisplay() nicht richtig funktioniert, wenn e eine globale Variable ist, weil numDisplay() ausgelöst wird, wenn #calcBtn geklickt wird.

Nehmen wir an, Sie geben die Zahl 5 in das Eingabefeld ein und klicken auf die Schaltfläche "Nummer anzeigen". Dies läuft numDisplay() und setzt den HTML-Code in #show zu e. e hat jedoch nie die Nummer 5. Es hat immer noch einen leeren Wert, der ihm beim Laden der Seite zugewiesen wurde. Damit es bei jedem Klicken auf die Schaltfläche neue Werte erhält, muss sich var e = document.getElementById("numVal").value; in der Funktion befinden.

Quelle

2017-06-10 17:49:35

Javascript: Warum wird Variable lokal arbeiten, aber nicht global

Antwort

Verwandte Themen