Question

已定义变量的“无法获得未定义或空引用的属性'style'。

我正试图制造一种加密设备来测试我的技能。当您按下键盘上的某个键时，我的“键”会亮起，所以我按下“ A”，而“ G”亮起。

我用过调试器，所有变量都很好，但是当代码设置了属性时，一切都在else语句上中断，当超时结束时，淡黄色。

在“ key”是关键字的情况下，我尝试重命名该函数，我尝试指定“ on”（这会消除错误，但什么也没有发生），我尝试将变量x切换到this.x。（对不起，格式很糟糕）

<!DOCTYPE HTML>
<html>
        <head>
        <script>
            function key(specId, on = false) {
                this.elemId = specId;
                this.state = on;
                this.docId = document.getElementById(`${this.elemId}`);

                this.blink = function() {
                    if(!this.state) {
                        this.docId.style.backgroundColor = "yellow";
                        this.state = true;
                        var x = setTimeout(this.blink, 1000);
                    }

                    else {
                        this.docId.style.backgroundColor = "black";
                        this.state = false;
                    }
                }
            }
            var a = new key("keyA");
            a.blink();
        </script>
        <style>
        .key {
            background-color:black;
            border:1px solid #000000;
            color:white;

            height:36px; /* twice the size of the font */
            width:36px;
            border-radius:50%;

            text-align:center;
        }
        </style>
    </head>
    <body>
        <div id="keyA" class="key">A</div>
    </body></html>

应该发生的是，当窗口加载时，屏幕上的指示灯“ A”变黄一秒钟，然后变回黑色。但是，当前指示灯变为黄色，并且一秒钟（超时）后，我得到了上面的错误。

Answer 1

当您在setTimeout内部调用眨眼函数时，您需要绑定“ this”上下文，如下所示：

var x = setTimeout（this.blink.bind（this），1000）;

我尝试过。工作正常。希望对您有所帮助：）

在对象方法中设置settimeout之后访问“ this”属性时出错

1 个答案: