js的作用域小问题...

Question

    <span id="status">qdqwdLED STATUS: OFF</span>
    <button id="btn">ON</button>
    <script>
        var btn = document.getElementById('btn');
        var opend = false;
        var status = document.getElementById('status');
        console.log(status);
        console.log(status.innerHTML);
        btn.onclick = function() {
            // var status = document.getElementById('status');
            // console.log(status);
            // console.log(status.innerHTML);
            if (opend) {
                this.innerText = 'OFF';
                status.innerHTML = 'LED STATUS: ON';
            } else {
                this.innerText = 'ON';
                status.innerHTML = 'LED STATUS: OFF';
            }
            opend = !opend;
        }
    </script>

为什么必须把获取status放到点击函数里面才能获取到这个元素，不然status.innerHTML是undefined,这点击事件函数里面也可以使用外部的变量不是吗

Answer 1

status是window内置属性，这个bug和window下的name的bug一样，所以你换个id名就行。

Answer 2

谢谢邀请，既然已经有采纳答案了，我来给个建议

建议通过 IIFE 的方式把自己的业务代码封闭起来，避免全局污染，也避免这种变量重名的问题

(function() {
    var btn = document.getElementById("btn");
    var opend = false;
    var status = document.getElementById("status");
    console.log(status);
    console.log(status.innerHTML);
    btn.onclick = function() {
        // var status = document.getElementById('status');
        // console.log(status);
        // console.log(status.innerHTML);
        if (opend) {
            this.innerText = "OFF";
            status.innerHTML = "LED STATUS: ON";
        } else {
            this.innerText = "ON";
            status.innerHTML = "LED STATUS: OFF";
        }
        opend = !opend;
    };
})();

如果需要定义全局变量的话，可以直接给 window.xxxx 赋值

(function() {
    window.app = {
        name: "MyApp"
    };
})();