Function stuck to a value (it returns but the value does not update) JS

I have a JS function that executes the following: when typing a text in the input, and pressing a button, the function analyzes the string to see if it has any of following letters: if it contains the letters “a”, “b”, or “c”, it returns “Perfect.”; if it contains “d”, “e”, “f”, returns “Good”, and so on.

It turns out that, when testing in the browser, the function works only once. If I insert a new input, just after running the function, it keeps returning the previous value.

For example: If I enter the text “ABC”, it returns “Perfect”; but if, after that, I insert the text “DEF”, it keeps returning the value “Perfect”, when in fact it should return “Good”.

const textInput = document.getElementById("nameInput").value;
const button = document.getElementById("btn");

const checkLetters = () => {
  for (i in textInput) {
    if (textInput.match(/a|b|b/gi)) {
      document.getElementById("resultOutput").innerHTML = "Perfect.";
      return;
    } else if (textInput.match(/d|e|f/gi)) {
      document.getElementById("resultOutput").innerHTML = "Good.";
      return;
    } else {
      document.getElementById("resultOutput").innerHTML = "Bad";
      return;
    }
  }
};

checkLetters(textInput);
<div class="input">
  <input id="nameInput" type="text" onkeyup="keyUp(event);" />
  <button id="btn" type="button" aria-label="result" onclick="checkLetters(textInput)" </button>
</div>

<div class="output">
  <output id="resultOutput" type="text"></output>
</div>

I came up with a solution that works on my desktop, but that fails on mobile: I inserted “window.location.reload()” inside the HTML button, so that the button refresh the browser right before executing the function. In this way, the function returns fresh and with no previous value, and works normally.

<button id="btn" type="button" aria-label="result" onclick="window.location.reload(); checkSyllables(catsName)"</button>

But this solution seems to be very brute and ugly, and I would like to solve the problem for good, right in JS, and not the way I did it (also because it doesn’t work on mobile).

I appreciate any and all help! My code is probably very bad, and I could use better methods, but it was the best way I managed to do since I only start programming a month ago.

Answer

You do not need to loop through each character of a string in order to check whether it matches your RegExp; furthermore, for your use case the test() method seems more appropriate than the match() one. Finally you can replace a|b|c and d|e|f with the equivalent ranges [a-c] and [d-f].

If you put everything together and add a bit of separation of concerns, you end up with something similar to:

const input = document.getElementById('nameInput');
const output = document.getElementById('resultOutput');
const btn = document.getElementById('btn');

btn.addEventListener('click', (event) => checkLetters());
input.addEventListener('keyup', (event) => keyUp(event));

function keyUp(event) {
  // ... do stuff
}

function checkLetters() {
  const inputTxt = input.value;

  if (/[a-c]+/gi.test(inputTxt)) {
    output.innerText = 'Perfect.';
  } else if (/[d-f]+/gi.test(inputTxt)) {
    output.innerText = 'Good.';
  } else {
    output.innerText = 'Bad.';
  }
}
<div class="input">
  <input id="nameInput" type="text" />
  <button id="btn" type="button" aria-label="result">check</button>
</div>

<div class="output">
  <output id="resultOutput" type="text"></output>
</div>