函数坚持一个值（它 returns 但值不更新）JS

Question

我有一个执行以下操作的 JS 函数：在输入中键入文本并按下按钮时，该函数会分析字符串以查看它是否包含以下任何字母：如果它包含字母“a” "、"b" 或 "c"，它 return 是“完美的”。如果它包含“d”、“e”、“f”、returns“好”等等。

事实证明，在浏览器中测试时，该功能仅有效一次。如果我在运行函数之后插入一个新输入，它会保持 return 之前的值。

例如：如果我输入文字“ABC”，它return是“Perfect”；但如果在那之后，我插入文本“DEF”，它会保持 return 值“Perfect”，而实际上它应该 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>

我想出了一个在我的桌面上工作的解决方案，但在移动设备上失败了：我在 HTML 按钮中插入了“window.location.reload()”，以便按钮刷新浏览器就在执行函数之前。这样，函数return就新鲜了，没有以前的值了，可以正常工作了。

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

但是这个解决方案似乎非常粗鲁和丑陋，我想在 JS 中彻底解决这个问题，而不是像我那样做（也因为它在移动设备上不起作用）。

感谢所有帮助！我的代码可能很糟糕，我可以使用更好的方法，但这是我一个月前才开始编程以来设法做到的最好的方法。

Answer 1

首先，您的脚本缺少结束标记，这是正确的脚本：

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)) {
      document.getElementById("resultOutput").innerHTML = "Good.";
      return;
    } else {
      document.getElementById("resultOutput").innerHTML = "Bad";
      return;
    }
  }
};

Answer 2

您不需要遍历字符串的每个字符来检查它是否与您的 RegExp 匹配；此外，对于您的用例， test() 方法似乎比 match() 方法更合适。最后，您可以将 a|b|c 和 d|e|f 替换为等效范围 [a-c] 和 [d-f].

如果您将所有内容放在一起并添加一些关注点分离，您最终会得到类似于：

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>

函数坚持一个值（它 returns 但值不更新）JS

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

javascript

refresh

return

function