如何在 JavaScript 中实现 .includes答案

【问题标题】：How to implement .includes in JavaScript如何在 JavaScript 中实现 .includes
【发布时间】：2021-11-24 22:57:28
【问题描述】：

我正在使用 JS 和 HTML 开发一个非常简单的聊天机器人，我有以下代码输出“答案”作为对用户所问内容的回复。这很好用，但是当我尝试实现 .includes 以检查是否已询问某个短语时，它不再输出任何内容。例如，如果用户问“你能帮忙”，它应该输出与“帮助”相同的答案，因为它包含“帮助”关键字。没有 .includes 代码可以正常工作。

function talk() {

  var know = {
    "Hey": "Hello!",
    "Help": `You can find help by clicking <a href='https://addressname.com'target="_blank">here</a>`
  };

  var user = document.getElementById('userBox').value;
  
  document.getElementById('chatLog').innerHTML = user + "<br>";
  
  if (user in know) {
    document.getElementById.includes('chatLog').innerHTML = know[user] + "<br>";
  } else {
    document.getElementById('chatLog').innerHTML = "I do not understand.";
  }

}

【问题讨论】：

document.getElementById 是一个函数。它期望使用参数 (document.getElementById("#selector")) 调用。它没有.includes 属性。如果您只是打开控制台，它会非常清楚地告诉您：Uncaught TypeError: document.getElementById.includes is not a function。所以你甚至不需要在 Stackoverflow 上问一个关于它的问题 :o)

标签： javascript include chatbot contains

【解决方案1】：

我猜你需要改变下面的行

document.getElementById.includes('chatLog').innerHTML

作为

document.getElementById('chatLog').innerHTML.includes(user)

includes() 方法确定数组是否在其条目中包含某个值，根据需要返回 true 或 false。

希望这会有所帮助：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

更新：

    var know = {
  "Hey": "Hello!",
  "Help": `You can find help by clicking <a href='https://addressname.com' target="_blank">here</a>`
};

function goo() {
  var userBox = document.getElementById('userBox');
  var userInput = userBox.value;
  var chatLog = document.getElementById('chatLog');
  var chatLogContent = "";

  if (!userInput) {
    chatLogContent = 'Please enter some value'
  }

  var hasKeyword = false;

  for (var key in know) {
    if (userInput.toLowerCase().includes(key.toLowerCase())) {
      hasKeyword = true;
      break;
    }
  }

  if (hasKeyword) {
    chatLogContent += know[key] + "<br>"; //or use know.key
  } else {
    chatLogContent += "I do not understand.<br>";
  }

  var client = document.createElement('div');
  client.setAttribute('class', 'client');
  client.innerHTML += userInput + "<br>";

  chatLog.appendChild(client);

  var server = document.createElement('div');
  server.setAttribute('class', 'server');
  server.innerHTML = chatLogContent;

  chatLog.appendChild(server);

}

更新
这应该会有所帮助：
https://jsfiddle.net/smileyface/948bg03n/1/
好吧，我不擅长css。但它完美地工作。每次单击按钮时滚动浏览。
在这里试试 - 本地主机聊天框在这里：https://jsfiddle.net/smileyface/948bg03n/1/show

更新
正如您在评论中所问的那样，
这只会显示当前的 cmets

if(hasKeyword){
    chatLogContent = know[key] + "<br>"; //or use know.key
}else{
    chatLogContent = "I do not understand.<br>";
}

chatLog.innerHTML = chatLogContent;

【讨论】：

感谢您的帮助，我已经尝试过了，但不幸的是它只输出用户输入的内容，而不是“答案”。
嗨，我并不是要为您的应用程序编写确切的代码。只是想澄清你所犯的错误。请浏览mozilla网站以了解更多关于.includes
@user1300788 ，我已经更新了答案。请通过并让我知道它是否不起作用。我没有在我的机器上试过。
@smileyface 效果很好，非常感谢您的帮助。非常感谢，我一定会仔细阅读您链接的资源。
@user1300788 - 检查我的 JSFiddle（链接）

【解决方案2】：

includes() 方法确定数组是否在其条目中包含某个值，根据需要返回 true 或 false。

getElementById 也是一个函数，它需要元素的 id 作为参数。

如果您想更改具有 id chatLog 的元素的内部 HTML，那么您必须按照以下方式进行。

if (user in know) {
    document.getElementById('chatLog').innerHTML = know[user] + "<br>";
  }

【讨论】：

谢谢，感谢您的澄清