在HTML页面上显示关闭

我正在尝试在JS中练习范围闭合，并且我非常坚持在HTML页面上实现范围封闭。这是我做的一个非常简单的代码，但它只是行不通的。该代码的主要思想是在按钮事件中使用"增加"函数" onclick"，然后在DIV上显示结果：

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

示例中的inc函数是函数范围的局部变量。您可以在该功能内部使用它，就像您在increase内使用start一样，但是您无法从功能范围外部访问它。从按钮中的ONCLICK将尝试在全局范围（窗口）中访问它，因此找不到该功能。但是，它可以找到increase()。

如果您将var inc = increase(0);更改为this.inc = increase(0);，则inc变量将在全局范围（窗口对象）中。这将使OnClick能够找到它。

，即使那样，它也不会显示DIV内部的结果，您只是在用函数inc分配了变量showIncrease，它不会以这种方式更新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/

的一个示例

相关内容

最新更新

热门标签：