Issues with JS for loop

Question

In my example I am trying to loop through a collection of HTML elements and check to see if they match a button click on screen. But the loop only seems to check the first html element and does not run the function again if another button is clicked.

keyboard.onclick = function(event) {
  event.target.className += " chosen";
  let letterFound = event.target.innerHTML;
  checkLetter(letterFound);
}

const checkLetter = (a) => {
  let letterCheck = document.querySelectorAll('.letter');

  for (i = 0; i < letterCheck.length; i++) {
    if (a === letterCheck[i].innerHTML) {
      letterCheck[i].className += " show";
      let letterMatch = letterCheck[i];

      return letterMatch
    } else {
      return null;
    }
  }
}

You've got return statements in your loop. They cause the enclosing function to exit. — Pointy
– Pointy, Commented Jul 30, 2018 at 14:02

Marco · Accepted Answer · 2018-07-30 14:09:15Z

1

I would use filter function from es6 to achieve this and solve this in a more functional approach. Hence if you need to support legacy browsers you can use babeljs to transpile code. Basically there is nothing these days that should prevent you from using new js features because with babel you can transpile all.

const matchingLetters = document.querySelectorAll('.letter').filter(elem => elem.innerHtml === a);
// now you can use the filtered array to do something with your matchingLetters.
// e.g. use .map or do some loop etc.

answered Jul 30, 2018 at 14:09

Marco

5,1396 gold badges40 silver badges77 bronze badges

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

Collectives™ on Stack Overflow

Issues with JS for loop

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related