1

I am very confused as to why this is happening. Basically, I am trying to make a word/phrase guessing game, and if the correct button letter matches the letters in the phrase, it uncovers the letter. I need to store the matching(correct) letter inside a variable and return that letter. If the letter guessed is not the correct one, I need the function to return null.

function checkLetter(clickedLetter) {
let letterFound = ""
if (clickedLetter.tagName == "BUTTON"){
    clickedLetter.className = "chosen";
    clickedLetter.setAttribute("disabled", "true");
    const li = document.querySelectorAll("li.letter")
    for (let i = 0 ; i < li.length ; i++){
        if (clickedLetter.textContent.toLowerCase() == li[i].textContent.toLowerCase()){
            li[i].classList = "show";
            letterFound = li[i]
           //without this return statement, it runs fine
            return letterFound
        } else {
        //without this return statement, it runs fine
        return null
        }
    }
}
}

qwerty.addEventListener("click", (e) => {
    const clickedLetter = e.target;
    checkLetter(clickedLetter);
});

https://jsfiddle.net/y4q7ot68/1/ Here is a jfiddle demo with the return statements commented out, working. If you uncomment the return statements, it gets all whacky and doesn't uncover any letters and/or all of the letters. What am I doing wrong?

Jesse
  • 123
  • 1
  • 10
  • 1
    Imagine you're looking for a particular page in a stack of papers. The `else return null` is the equivalent of giving up your search if the page on the top of the stack isn't the one you're looking for. – Patrick Roberts Feb 21 '19 at 02:48
  • You might want to use a [debugger](https://stackoverflow.com/questions/25385173/what-is-a-debugger-and-how-can-it-help-me-diagnose-problems) for that or look at [How to debug small programs](https://ericlippert.com/2014/03/05/how-to-debug-small-programs/) – Andreas Feb 21 '19 at 03:03

1 Answers1

0

The reason it acts wacky is that it's in a for loop and it's returning multiple times which after the first return it ends the function. To keep the return functionality delete the returns in the for loop and make a var and set it to true if its found and false from the beginning and compare it in if statements outside of the for loop where you can then have return statements.

function checkLetter(clickedLetter) {
  let letterFound = ""
  if (clickedLetter.tagName == "BUTTON") {
    clickedLetter.className = "chosen";
    clickedLetter.setAttribute("disabled", "true");
    const li = document.querySelectorAll("li.letter")
    var boolFound = false;
    for (let i = 0; i < li.length; i++) {
      if (clickedLetter.textContent.toLowerCase() == li[i].textContent.toLowerCase()) {
        li[i].classList = "show";
        letterFound = li[i];
        boolFound = true;
      } else {
        /* No return */
      }
    }
    if (boolFound == true) {
      return letterFound;
    } else {
      return null;
    }

  }
}

Also in the place where you call this function don't forget to:

randomvar=checkLetter(clickedLetter);
Folded-Code
  • 49
  • 4