HTMLでクロージャを表示するページ

JSでスコープクロージャを実行しようとしていますが、私はHtmlページでスコープクロージャを実装することに非常に固執しています。これは非常に簡単なコードですが、うまくいきません。HTMLでクロージャを表示するページ

(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>

出典

2016-12-26 Ilanz

inc機能をあなたの例では：このコードの主なアイデアは、「onclickの」ボタンイベント内で機能「増加」を使用して、divの上で結果を示すことです関数スコープのローカル変数です。 increaseの中にstartを使用しているように、その関数内で使用することはできますが、関数スコープの外からはアクセスできません。ボタンからのonclickは、グローバルスコープ（ウィンドウ）内でそのボタンにアクセスしようとするため、関数を見つけることができません。しかし、increase()を見つけることができます。

var inc = increase(0);をthis.inc = increase(0);に変更すると、inc変数がグローバルスコープ（ウィンドウオブジェクト）になります。これは、onclickがそれを見つけることができるようになります。

さらにdiv内に結果が表示されない場合は、変数showIncreaseに関数incを割り当てるだけで、htmlのように更新されません。

あなたが内容を高め、更新する、あなたのinc機能をラップする可能性のdivの内容を更新するには：

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

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

し、HTMLには、代わりにその関数を呼び出す：

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

例をhttps://jsfiddle.net/0kvbL3o1/

出典

2016-12-26 12:11:21 Thomas

最終的にはうまくいきました、ありがとう – Ilanz

HTMLでクロージャを表示するページ

答えて

関連する問題