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