Похоже, что игровой цикл прерывается в конце итерации массива.Uncaught TypeError - PullRequest
Новая
       16

Похоже, что игровой цикл прерывается в конце итерации массива.Uncaught TypeError

0 голосов
/ 06 декабря 2018

Доброе утро,

Определенно, здесь вопрос новичка, это мой первый настоящий проект 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);
}

Заранее извиняюсь за любые ошибки или оплошности в публикации этого сообщения.Я сильно подозреваю, что я буду пинать себя, когда это будет исправлено.

С уважением

Энди

1 Ответ

0 голосов
/ 06 декабря 2018

Проблема связана с тем, что вы проверяете длину массива, а затем пытаетесь использовать элемент этого массива, который не существует.Возможно, вы также пытаетесь установить атрибут для несуществующего элемента.

Возможно, это реальная причина проблемы: 

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-анимацию .

...