在HTML页面上显示闭包
提问于 2016-12-26 11:58:33
我正在尝试在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>
回答 1
Stack Overflow用户
发布于 2016-12-26 12:11:21
示例中的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41330930
复制
腾讯云开发者
