Dynamisches Update des variablen Umfangs und DOM -Elemente in JavaScript: Betrachten Sie das Kernprinzip aus dem Problem '0'

In diesem Tutorial wird das Kernkonzept des variablen Umfangs (global und lokal) in JavaScript untersucht und das Problem löst, dem Anfänger häufig begegnen, dass DOM -Elementwerte nicht mit variablen Änderungen aktualisieren. Wir werden spezifische Beispiele verwenden, um zu klären, wann und wie die HTML -Elemente korrekt aktualisiert werden, um den neuesten Status von JavaScript -Variablen widerzuspiegeln und sicherzustellen, dass die Benutzeroberfläche mit der Programmlogik synchronisiert ist.

In der JavaScript -Programmierung ist das Verständnis des Variablenbereichs und der effektiven Aktualisierung von DOM -Elementen (Dokumentobjektmodell) die Grundlage für die Erstellung dynamischer interaktiver Webseiten. Viele Anfänger treten häufig auf Probleme auf, wenn Sie versuchen, den Inhalt der Seite entsprechend den Benutzeraktionen zu ändern. Der Element -Anzeigewert aktualisiert oder zeigt den Anfangswert nicht an oder zeigt sie nicht an (z. B. "0"). Dies ergibt sich normalerweise aus Missverständnissen über den Umfang der Variablen und die unsachgemäße Handhabung des DOM -Update -Timings.

Variabler Umfang im JavaScript verstehen

Variabler Umfang in JavaScript definiert, wo im Code auf Variablen zugegriffen werden können. Es gibt zwei Haupttypen:

1. Globaler Umfang : Variablen, die außerhalb jeder Funktion deklariert sind, haben einen globalen Bereich. Dies bedeutet, dass sie überall im Skript zugegriffen und geändert werden können. In dem von Ihnen angegebenen Beispielcode var x = 0; und var y = 0; sind globale Variablen.
2. Lokaler Umfang/Funktionsbereich : Variablen, die mit dem VAR -Schlüsselwort innerhalb einer Funktion deklariert sind, haben lokaler Bereich. Sie können nur innerhalb der Funktion zugegriffen werden. Diese lokalen Variablen können nicht mit Code außerhalb der Funktion zugegriffen werden.

Beispielanalyse: In Ihrem ersten Code:

 var x = 0; // Globale variable var y = 0; // Globale variable Funktion alternativ1 () {
    y = x 5; // die globale Variable y ändern
    document.getElementById ("Demo"). Innerhtml = "Sie haben" y gewählt;
}
// ... andere alternative Funktionen sind ähnlich

Hier ist y eine globale Variable. Dies bedeutet, dass die Funktionen von Alternative1 (), Alternative2 () und Alternative3 () darauf zugreifen und diese ändern können. Wenn die Funktion ausgeführt wird, wird der Wert von y tatsächlich aktualisiert.

Häufige Missverständnisse für Anfänger: Wenn y in einer Funktion so deklariert wird:

 Funktion alternative1 () {
    var y = x 5; // y ist eine lokale Variable, die nur in Alternative1 document.getElementById ("Demo") gültig ist. Innerhtml = "Sie haben" y gewählt;
}
// Zu diesem Zeitpunkt das Dokument.GetElementById ("Demo2"). Innerhtml = y; Kann nicht auf diese lokale Variable y zugreifen

In diesem Fall kann die in der Funktion deklarierte lokale Variable y in der Tat nicht außerhalb der Funktion zugegriffen werden. Dies ist ein Fehler, den viele Anfänger machen werden, und es ist auch eine Verkörperung des Konzepts, dass "Variablen zu unabhängigen Funktionen von Funktionen gehören". Im ursprünglichen Code, den Sie bereitstellen, ist Y jedoch global, so dass das Problem nicht im Bereich selbst liegt.

"Zeit" -Anproblem für das DOM -Element -Update

Obwohl Ihr Y eine globale Variable ist und ihr Wert nach dem Funktionsaufruf ändert, zeigt der Inhalt der P -Tag -ID = "Demo2" immer als 0 an. Dies liegt nicht an dem Umfang von Y, sondern weil Ihr JavaScript -Code zur Aktualisierung des Demo2 -Elements falsch ausgeführt wird.

Bitte beachten Sie diese Codezeile:

 document.getElementById ("Demo2"). Innerhtml = y;

Diese Codezeile befindet sich am Ende des <script> -Tags, aber <strong>außerhalb jeder Funktion . Dies bedeutet, dass es nur ausgeführt wird, wenn das JavaScript -Skript zum ersten Mal ausgeführt wird, wenn die Seite geladen wird. In diesem Moment beträgt der Anfangswert von y 0. Daher wird der Inhalt des Demo2 -Elements auf 0 gesetzt.</script>

Wenn der Benutzer auf eine Schaltfläche klickt, wechselt es beispielsweise Alternative1 (), der Wert von Y ändert sich auf 5 und das Demo -Element aktualisiert die Anzeige "Sie haben 5" korrekt aktualisiert. Document.getElementById ("Demo2"). Innerhtml = y; Diese Codezeile wird nicht automatisch erneut ausgeführt. Es wird nur einmal ausgeführt, wenn das Skript geladen wird und der Inhalt von Demo2 nicht mehr aktualisiert wird.

Lösung: Aktualisieren Sie das DOM unmittelbar nach den variablen Änderungen

Um dieses Problem zu lösen, müssen Sie sicherstellen, dass der Inhalt des Demo2 -Elements jedes Mal explizit aktualisiert wird, wenn sich der Wert von Y ändert. Der direkteste Weg besteht darin, den Code, der Demo2 in eine Funktion aktualisiert, die den Y -Wert ändert.

Beispiel für korrigierte Code:

 

<kopf>
    <title> JavaScript -Variablen und DOM -Updates </title>


  <button onclick="alternative1 ()"> 5 </button>
  <button onclick="alternative2 ()"> 10 </button>
  <button onclick="alternative3 ()"> 15 </button>

  <p id="Demo"> </p>
  <p id="Demo2"> </p>

  <script>
   // Globale variable var x = 0 deklarieren;
   var y = 0;

    // Funktion 1: y auf x 5 einstellen
    Funktion alternative1 () {
        y = x 5;
        // Demo -Element -Dokument aktualisieren.
        // Schlüssel: Nach dem y -Wert ändert sich das Demo2 -Element -Dokument.
    } 

    // Funktion 2: y auf x 10 einstellen
    Funktion alternative2 () {
        y = x 10;
        // Demo -Element -Dokument aktualisieren.
        // Schlüssel: Nach dem y -Wert ändert sich das Demo2 -Element -Dokument.
    }

    // Funktion 3: y auf x 15 einstellen
    Funktion alternative3 () {
        y = x 15;
        // Demo -Element -Dokument aktualisieren.
        // Schlüssel: Nach dem y -Wert ändert sich das Demo2 -Element -Dokument.
    }

    // Wenn die Seite geladen wird, initialisieren Sie die Anzeige von Demo2, um sicherzustellen, dass die erste Last korrekt ist.
  </script>

</kopf>

Das obige ist der detaillierte Inhalt vonDynamisches Update des variablen Umfangs und DOM -Elemente in JavaScript: Betrachten Sie das Kernprinzip aus dem Problem '0'. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!