CODEWITHSUNDEEP
javascriptincludechatbotcontains
user1300788
user1300788

Reputation: 181

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

}

Upvotes: 0

Views: 331

Answers (2)

smilyface
smilyface

Reputation: 5513

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;

Upvotes: 1

Arun Bohra
Arun Bohra

Reputation: 164

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

Also getElementById is a function which expects the id of an element as a parameter.

If you want to change the inner HTML of an element having id chatLog then you have to do it the following way.

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

Upvotes: 1

Related Questions