Question

早上好，

在这里绝对是一个新手问题，这是我的第一个真正的JS项目-因此，对于笨拙的代码，请提前道歉。

以下功能用于显示“ simon”游戏的灯光顺序。由于我已经测试了多个长度的数组，因此代码最初似乎可以正常工作，但是退出循环时，出现以下错误：

Uncaught TypeError: Cannot read property 'setAttribute' of null
    at show (script.js:95)
    at showLights (script.js:83)
    at script.js:88

我已经到处找寻了解决此错误的方法，大多数反馈是它与DOM有关，包装器也将修复。我发现包装器无法解决。同样，我看不到CSS或HTML存在问题，因为功能正常，直到退出为止。

循环功能复制如下：

// iterates through simon.array then allows button press
function showLights(x) {
    if (x >= simon.array.length) {
        clearTimeout(timer);
        show(x);
        allowPress();
    } else {
        show(x);
        var timer = setTimeout(function(){
        showLights(x+1);
        },500);
    } 
}   
// adds then removes flash class to light pads. 
function show(x){ 
    var display = document.getElementById("light" + simon.array[x]);
    display.setAttribute("class", "flasher");
    setTimeout(function(){
        display.setAttribute("class", "game-box");
    },500);
}

对于在发布此内容时出现的任何错误或错误，我们深表歉意。我强烈怀疑这个问题解决后会踢自己。

亲切问候

安迪

Answer 1

问题与您检查数组的长度，然后尝试使用该数组中不存在的元素有关。您可能还试图将属性设置为不存在的元素。

猜测，这是问题的真正原因：

if (x >= simon.array.length) {
    clearTimeout(timer);
    show(x);
    allowPress();

只需删除show(x)应该会有所帮助。原因是您要检查simon.array的长度，然后稍后在function show(x)中请求simon.array[x]，但这不会找到任何内容，因为x大于该数组的长度。

另一个可能的问题在下面的代码块中，但可以通过多种方法解决。一种方法是在通过之前检查x。另一个是在设置属性之前，确保元素（display）不是null。

// adds then removes flash class to light pads. 
function show(x){ 
    var display = document.getElementById("light" + simon.array[x]);
    display.setAttribute("class", "flasher");
    setTimeout(function(){
        display.setAttribute("class", "game-box");
    },500);
}

我的建议如下：

// adds then removes flash class to light pads. 
function show(x){ 
    var display = document.getElementById("light" + simon.array[x]);
    if (display) {
        display.setAttribute("class", "flasher");
        setTimeout(function(){
            display.setAttribute("class", "game-box");
        },500);
    }
}

您可能想签出classList以及setAttribute的替代方法。

除了使用setTimeout之外，还可以考虑使用CSS animation。

游戏循环似乎在遍历数组的结尾处中断。未捕获的TypeError

1 个答案: