Javascript function keeps on returning null

Question

So I have been working on a game project where if a player clicks on a letter that if it matches in a phrase to guess, it displays the letter. If the player clicks on a letter without any matches (which is represented by null) then a blue heart turns to a lost heart and the missed counter goes up. For some reason, Even though the player clicks on a matching letter, my code still displays a lost heart. Can anyone help? Here is the github link to the whole project: https://github.com/santanaquan/Techdegree-Project-6

here is the javascript code snippet.

 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

The checkLetter function is faulty. I quote the original below for reference:

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;
}

The problem here is that letter is updated every single time through the loop. This means it ends with whatever value it gets on the last iteration, which will always be null unless the last letter was clicked - throwing away any match found on the way.

One very simple fix is to initialise letter as null , then only change it when a match is found. This guarantees it will have the correct value at the end. So here is a working version:

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

Since your code iterates over all letters, even if the player guesses a correct letter, your code will find it but will then continue to loop after that, this making letter null.

You only need to remove the else and initialize letter to null. You should not break in the if because that way you'll miss duplicated letters.

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

As pointed by others your checkLetter function is broken. You have to stop after you get the match. If you iterate further the letters won't match and the letter variable will be set to null. Modify it to this.

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;
}

Now you have one other problem that is if the letter was already guessed correctly, the loop will not work if there are duplicate characters in the phrase as the first match will set the letter variable. So you will have to add a check in the loop to see if the letter is already matched.

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;
}