Search code examples
javascriptincludechatbotcontains

How to implement .includes in JavaScript


I'm developing a very simple chatbot using JS and HTML, and I have the following code which outputs an "answer" as a reply to what the user has asked. This works fine but when I try to implement .includes to check if a certain phrase has been asked it no longer outputs anything. For example, if the user asks "can you help" it should output the same answer as "help" since it contains the "help" keyword. Without .includes the code works fine.

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.";
  }

}

Solution

  • I guess you need to change below line

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

    as

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

    The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

    Hope this helps:
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

    Update:

        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);
    
    }
    

    Update
    This should be helpful:
    https://jsfiddle.net/smileyface/948bg03n/1/
    Well, I am not good at css. But it works perfectly. Scroll through each time you click on button.
    Try here - Localhost chat box is here : https://jsfiddle.net/smileyface/948bg03n/1/show

    Update
    As you asked in comment,
    This will only show current comments

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