在 HTML 页面上显示闭包答案

【问题标题】：Showing the Closure on HTML Page在 HTML 页面上显示闭包
【发布时间】：2017-05-10 21:35:51
【问题描述】：

我正在尝试在 JS 中练习范围关闭，但我非常坚持在 Html 页面上实现范围关闭。这是我做的一个非常简单的代码，但它只是不起作用。这段代码的主要思想是在按钮事件“onclick”中使用函数“increase”，然后在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>

【问题讨论】：

标签： javascript html closures

【解决方案1】：

您示例中的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/ 的示例

【讨论】：

终于成功了，谢谢