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

If you make a code snippet, it's vastly more helpful if it actually demonstrates the problem you're having. — Pointy
– Pointy, Commented Apr 14, 2020 at 19:10
This is a great time to familiarize yourself with your browser's debugging tools to help you narrow down the problem. For example, if you're convinced that the problem is a single function returning null when it shouldn't then you should place a script debugger breakpoint in that function and step through to observe its behavior. Somewhere you can narrow this down to a specific operation which first produces an unexpected result. What was that specific operation? What were the values used? What was the result? What result did you expect? Why? — David
– David, Commented Apr 14, 2020 at 19:11
I bet this letter = getLetter[i].textContent; is missing a break just after so that it actually ends the loop when a letter is found rather than searching to the end of whatever the loop loops over and then returning null. — Wiktor Zychla
– Wiktor Zychla, Commented Apr 14, 2020 at 19:12
As mentioned by @David - try to use browser developer tools. Usually you enable by F12 and helps you to put breakpoints, see current state, evaluate expressions and more :) — Pavel Sem
– Pavel Sem, Commented Apr 14, 2020 at 19:13
Ive been trying the break; but it makes it so that the letter clicked only matches one time on the phrase even if it contains the letter multiple times. — Ega
– Ega, Commented Apr 14, 2020 at 19:18

Nikola Dimitroff · Accepted Answer · 2020-04-14 19:16:58Z

1

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

answered Apr 14, 2020 at 19:16

Nikola Dimitroff

6,2572 gold badges28 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ega Over a year ago

OK this was the correct fix! With the break it makes it so that it only guesses the letter once. Thanks!

Robin Zigmond · Accepted Answer · 2020-04-14 19:26:16Z

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

edited Apr 14, 2020 at 19:26

answered Apr 14, 2020 at 19:14

Robin Zigmond

18.3k2 gold badges25 silver badges38 bronze badges

1 Comment

Delta Over a year ago

This is correct but breaking the loop on the first match is assuming the same letter can't have multiple occurrences. His loop isn't just checking if the letter exists but also changing CSS for every match.

Deiknymi · Accepted Answer · 2020-04-14 19:26:19Z

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

Collectives™ on Stack Overflow

Javascript function keeps on returning null

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related