Javascript функция продолжает возвращать ноль

Question

Итак, я работал над игровым проектом, в котором, если игрок нажимает на букву, которая, если она соответствует фразе для угадывания, отображает букву. Если игрок нажимает на букву без совпадений (которая представлена ​​нулем), то синее сердце превращается в потерянное сердце, а пропущенный счетчик повышается. По какой-то причине, несмотря на то, что игрок нажимает на соответствующую букву, мой код все еще показывает потерянное сердце. Кто-нибудь может помочь? Вот ссылка на весь проект на github: https://github.com/santanaquan/Techdegree-Project-6

Вот фрагмент кода javascript.

function checkLetter(button) {
    const getLetter = document.getElementsByClassName('letter');
    let letter;
    for (let i = 0; i < getLetter.length; i++) {
        if (button.textContent === getLetter[i].textContent) {
            getLetter[i].className += ' show';
            letter = getLetter[i].textContent;
        }
        else {
            letter = null;
        }
    } 
    return letter;
}

Answer 1

Поскольку ваш код перебирает все буквы, даже если игрок угадывает правильную букву, ваш код найдет ее, но после этого продолжит l oop, после чего letter станет нулевым.

Вам нужно только удалить else и инициализировать letter в null. Вы должны не вставлять в if, потому что таким образом вы пропустите дублированные буквы.

function checkLetter(button) {
    const getLetter = document.getElementsByClassName('letter');
    let letter = null;
    for (let i = 0; i < getLetter.length; i++) {
        if (button.textContent === getLetter[i].textContent) {
            getLetter[i].className += ' show';
            letter = getLetter[i].textContent;
        }
     }
     return letter;
 }

Answer 2

Функция checkLetter неисправна. Я цитирую нижеприведенный оригинал для справки:

function checkLetter(button) {
    const getLetter =  document.getElementsByClassName('letter');
    let letter;
    for (let i = 0; i < getLetter.length; i++) {
        if (button.textContent === getLetter[i].textContent) {
            getLetter[i].className += ' show';
            letter = getLetter[i].textContent;
        }
        else {
            letter = null;
        }
    } 
    return letter;
}

Проблема здесь в том, что letter обновляется каждый раз через l oop. Это означает, что он заканчивается тем значением, которое он получит на последней итерации, которое всегда будет null, если только не была нажата последняя буква - выбрасывание любого совпадения, найденного на пути.

Одно очень простое исправление - инициализация letter как null, затем изменяйте его только тогда, когда найдено совпадение. Это гарантирует, что оно будет иметь правильное значение в конце. Итак, вот рабочая версия:

function checkLetter(button) {
    const getLetter =  document.getElementsByClassName('letter');
    let letter = null;
    for (let i = 0; i < getLetter.length; i++) {
        if (button.textContent === getLetter[i].textContent) {
            getLetter[i].className += ' show';
            letter = getLetter[i].textContent;
        }
    } 
    return letter;
}

Answer 3

Как указано другими, ваша функция checkLetter не работает. Вы должны остановиться после того, как получите матч. Если вы продолжите итерацию, буквы не будут совпадать, и переменная буквы будет установлена ​​в нуль. Измените его следующим образом.

function checkLetter(button) {
    const getLetter =  document.getElementsByClassName('letter');
    let letter = null;
    for (let i = 0; i < getLetter.length; i++) {
        if (button.textContent === getLetter[i].textContent) {
            getLetter[i].className += ' show';
            letter = getLetter[i].textContent;
            break;
        }
    } 
    return letter;
}

Теперь у вас есть еще одна проблема: если буква уже была правильно угадана, l oop не будет работать, если в фразе в качестве первого совпадения есть повторяющиеся символы установит переменную буквы. Таким образом, вам нужно будет добавить чек в l oop, чтобы увидеть, соответствует ли буква.

function checkLetter(button) {
    const getLetter =  document.getElementsByClassName('letter');
    let letter = null;
    for (let i = 0; i < getLetter.length; i++) {
        if (button.textContent === getLetter[i].textContent) {
           if(/*letter is not already guessed*/) {
              getLetter[i].className += ' show';
              letter = getLetter[i].textContent;
          }
        }
    } 
    return letter;
}