Anzeigen der Closure auf HTML-Seite

Ich versuche Scope-Abschluss in JS zu üben, und ich bin ziemlich stecken bei der Implementierung des Bereichs Schließung auf HTML-Seite. Es ist ein ganz einfacher Code, den ich gemacht habe. Aber es funktioniert einfach nicht. Die Hauptidee dieses Codes ist die Funktion „Anstieg“ in der Schaltfläche Ereignisse „Onclick“ zu verwenden, und dann auf dem div das Ergebnis zeigen:Anzeigen der Closure auf HTML-Seite

(function() { 
 
    'use strict' 
 

 
    var showIncrease = document.getElementById("increase").innerHTML; 
 

 

 

 
    this.increase= function (strat) { 
 
     return function() { 
 
      start++; 
 
      return start; 
 
     } 
 
    } 
 

 
    var inc = increase(0); 
 

 
    showIncrease = inc; 
 

 

 
}).apply(this);

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title></title> 
 

 
</head> 
 
<body> 
 
    
 

 
    <button onclick="inc()">increase</button> 
 

 

 
    <div id="increase"></div> 
 

 

 
    <script src="timer.js"></script> 
 

 
</body> 
 
</html>

Quelle

2016-12-26 Ilanz

Die inc Funktion in Ihrem Beispiel ist eine lokale Variable des Funktionsumfangs. Sie können es innerhalb dieser Funktion verwenden, wie Sie die start innerhalb increase verwenden, aber Sie können nicht von außerhalb des Funktionsumfangs zugreifen. Der onclick von der Taste versucht, auf ihn im globalen Bereich (Fenster) zuzugreifen, also kann er die Funktion nicht finden. Es kann jedoch increase() finden.

Wenn Sie die var inc = increase(0); in this.inc = increase(0); ändern, befindet sich die inc Variable im globalen Bereich (das Fensterobjekt). Dadurch wird der Onclick in der Lage sein, es zu finden.

Und selbst dann wird es nicht das Ergebnis innerhalb der div anzeigen, Sie nur die Variable showIncrease mit der Funktion inc zuweisen, wird es nicht die HTML-Aktualisierung auf diese Weise.

Um den Inhalt des div aktualisieren Sie Ihre inc Funktion wickeln können, um den Inhalt zu erhöhen und zu aktualisieren:

var divIncrease = document.getElementById("increase"); 
var inc = increase(0); 

this.incAndShow = function() { 
    var result = inc(); 
    divIncrease.innerHTML = result; 
}

Und in Ihrem HTML-Aufruf, der stattdessen funktionieren:

<button onclick="incAndShow()">increase</button>

Ein Beispiel bei https://jsfiddle.net/0kvbL3o1/

Quelle

2016-12-26 12:11:21 Thomas

Es hat endlich funktioniert, danke – Ilanz

Anzeigen der Closure auf HTML-Seite

Antwort

Verwandte Themen