我使用的是纯 JavaScript，但我继续收到以 "is not a function" 结尾的错误。如何做到这一点，以便我可以检测单词并做出相应的回复？

Question

我想检测用户输入文本中的一个或多个特定单词并相应地回复。我计划添加更多的单词来检测，但现在我一直在使用它。我的结果是 finalKey.contains 不是函数。

<html>
<div>
  <p1 id="iOut"></p1>
</div>
<div>
  <input id="uIn" value=""></input>
</div>
<button onclick="regis()">SUBMIT</button>

<script>
  var key = document.getElementById("uIn").value;
  var finalKey = key.toUpperCase();

  function regis() {
    if (finalKey.contains("Hi" || "H")) {
      document.getElementById("iOut").innerHTML = "HEY";

    } else if (finalKey.contains("Bye" || "Goodbye")) {
      document.getElementById("iOut").innerHTML = "Okay";

    } else {
      document.getElementById("iOut").innerHTML = " Try again";
    }
  }
</script>

</html>

Answer 1

没有包含这样的东西。是 .includes 或 indexOf != -1

您的值收集也需要在函数内部

此外，您不能在一个语句中测试两个值，除非您将其翻转并使用数组：

["Hi","H"].indexOf(finalKey) !=-1

或

["HI","H"].filter(text => finalKey.startsWith(text)).length > 0

如果您希望 finalkey 以任一开头 - 如果您想测试完整的输入，请使用 .includes

最后您将文本大写，因此比较大写文本

function regis() {
  var key = document.getElementById("uIn").value;
  var finalKey = key.toUpperCase();

  if (["HI","H"].filter(text => finalKey.includes(text)).length > 0) {
    document.getElementById("iOut").innerHTML = "HEY";
  } else 
    if (["BYE","GOODBYE"].filter(text => finalKey.includes(text)).length > 0) {
    document.getElementById("iOut").innerHTML = "Okay";
  } else // GOOD has to be AFTER GOODBYE to not catch it
    if (["GOOD","GREAT"].filter(text => finalKey.includes(text)).length > 0) {
    document.getElementById("iOut").innerHTML = "That's Good";
  } else {
    document.getElementById("iOut").innerHTML = " Try again";
  }
}

<div>
  <p1 id="iOut"></p1>
</div>
<div>
  <input id="uIn" value="" />
</div>
<button type="button" onclick="regis()">SUBMIT</button>

使用正则表达式和单词边界

注意我包裹在一个表格中，现在你也可以按回车键

const wordList = [
  { list: ["HI", "H"], answer: "HEY" },
  { list: ["BYE", "GOODBYE"], answer: "Okay" },
  { list: ["GOOD", "GREAT"], answer: "That's good" }
];

const defaultText = " Try again";

document.getElementById("inputForm").addEventListener("submit", e => {
  e.preventDefault()
  const input = document.getElementById("uIn").value.trim().toUpperCase();
  let result = wordList
    .filter(({ list, answer }) => list
      .filter(word => new RegExp("\b" + word + "\b").test(input))
      .length > 0);
      
  console.log(result)
  document.getElementById("iOut").innerHTML = result.length > 0 ? result[0].answer : defaultText;
})

<div>
  <p1 id="iOut"></p1>
</div>
<form id="inputForm">
  <div>
    <input id="uIn" value="" />
  </div>
  <button>SUBMIT</button>
</form>

Answer 2

您需要使用 .includes() 而不是 .contains()。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

我建议您熟悉 Chrome 的开发人员工具。例如，打开浏览器输入"xyz".，你会看到各种可用的方法，而contains()不在列表中。

此外，正如@mplungjan 指出的，这里还有其他问题。

"Hi" || "H" 的计算结果为“嗨”。所以"HI"在这里完全被忽略了。

您可以改写 finalKey.includes("Hi") || finalKey.includes("H"))，但是添加其他条件会变得很麻烦。

更好的方法是按照以下思路使用函数式编程：

const wordsToTest = ['FOO', 'BAR'];
if (wordsToTest.find(word => finalKey.includes(word))) {

Answer 3

我意识到我在之前的回答中犯了一个根本性的错误，所以我想出了另一个解决方案。使用这种方法，您不必进行多个 if/else 语句，而只需将新对象添加到数组中，我希望在查看它时它是非常不言自明的:)

<html>
<div>
  <p1 id="iOut"></p1>
</div>
<div>
  <input id="uIn" value=""></input>
</div>
<button onclick="regis()">SUBMIT</button>

<script>


  function regis() {

    let key = document.getElementById("uIn").value;
    let finalKey = key.toUpperCase();
    let match = false;

    // Words to test for 
    autoComplete = [
        { // Hey
            response: "hey",
            input: [
                'HI',
                'H',
            ]
        },
        { // Bye
            response: "Bye",
            input: [
                'BYE',
                'GOODBYE',
            ]
        }
    ]

    for (potentialMatch of autoComplete){
        for (input of potentialMatch.input){
            if (input === finalKey){
                document.getElementById("iOut").innerHTML = potentialMatch.response;
                match = true;
            }
        }
    }

    if (match === false)
        document.getElementById("iOut").innerHTML = " Try again";
    }
    
</script>

</html>

我使用的是纯 JavaScript，但我继续收到以 "is not a function" 结尾的错误。如何做到这一点，以便我可以检测单词并做出相应的回复？

I'm using pure JavaScript but I continue to get errors that end with "is not a function". How do make it so I can detect words and reply accordingly?

html

javascript

if-statement

function

innerhtml