javascript - 值更改后，addeventlistener 中的变量未更新

Question

我有一个变量设置为false。我还有一个 addEventListener，因此当我单击按钮时，它应该显示变量的值(true 或 false)。

我有另一个按钮可以将变量的值更改为true。因此，当我按下该按钮将其更改为 true，然后使用 addEventListener 按钮检查变量的值时，它应该反射(reflect)为 true。问题是事实并非如此。

按下“设置状态”按钮后，它应该提醒状态为true。为什么值没有改变？

这是代码:

<button id="button">Set Status</button>
<br>
<button id="check-status">Check Status</button>

<script>
var status = false;

document.getElementById('check-status').addEventListener('click', function(event) {
    if(status === false) {
        alert('The status is false');
    } else {
        alert('The status is true');
    }
});

document.getElementById("button").onclick = function fun() {
    setStatusTrue();
}

function setStatusTrue() {
    var status = true;
}
</script>

演示链接:https://jsfiddle.net/xpLuh0ew/

Answer 1

你搞乱了变量的范围。要设置函数范围之外的 status 变量，请使用:

function setStatusTrue() {
    status = true;
}

您可以阅读有关范围的更多信息 here