顯示關閉HTML頁面

我正在嘗試在JS中練習範圍閉包，我很堅持在Html頁上實現範圍閉包。這是一個非常簡單的代碼，但它不起作用。這段代碼的主要思想是使用功能「增加」按鈕事件中「點擊」，然後顯示在DIV結果：顯示關閉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功能是函數作用域的局部變量。您可以在該函數內部使用它，例如在increase中使用start，但不能從函數作用域之外訪問它。按鈕上的onclick會嘗試在全局範圍（窗口）中訪問它，所以它無法找到該功能。但是，它可以找到increase()。

如果將var inc = increase(0);更改爲this.inc = increase(0);，則inc變量將位於全局作用域（窗口對象）中。這將使onclick能夠找到它。

即使這樣它不會顯示div內的結果，你只是分配變量showIncrease與功能inc，它不會更新HTML的方式。

要更新div的內容，你可以換你inc功能，增加和更新內容：

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頁面

回答

相關問題