Estoy desarrollando un chatbot muy simple usando JS y HTML, y tengo el siguiente código que genera una "respuesta" como respuesta a lo que el usuario ha preguntado. Esto funciona bien, pero cuando trato de implementar .includes para verificar si se ha solicitado una frase determinada, ya no genera nada. Por ejemplo, si el usuario pregunta "¿puede ayudarme?", debería generar la misma respuesta que "ayuda", ya que contiene la palabra clave "ayuda". Sin .incluye el código funciona bien.
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."; } }Supongo que necesitas cambiar la línea de abajo.
document.getElementById.includes('chatLog').innerHTMLcomo
document.getElementById('chatLog').innerHTML.includes(user)El método include() determina si una matriz incluye un cierto valor entre sus entradas, devolviendo verdadero o falso según corresponda.
Espero que esto ayude:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
Actualizar:
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); } Actualizar
Esto debería ser útil:
https://jsfiddle.net/smileyface/948bg03n/1/
Bueno, no soy bueno en css. Pero funciona perfectamente. Desplácese cada vez que haga clic en el botón.
Pruebe aquí: el cuadro de chat de Localhost está aquí : https://jsfiddle.net/smileyface/948bg03n/1/show
Actualizar
Como preguntaste en el comentario,
Esto solo mostrará los comentarios actuales.
if(hasKeyword){ chatLogContent = know[key] + "<br>"; //or use know.key }else{ chatLogContent = "I do not understand.<br>"; } chatLog.innerHTML = chatLogContent;El método include() determina si una matriz incluye un cierto valor entre sus entradas, devolviendo verdadero o falso según corresponda.
También getElementById es una función que espera la identificación de un elemento como parámetro.
Si desea cambiar el HTML interno de un elemento que tiene id chatLog , debe hacerlo de la siguiente manera.
if (user in know) { document.getElementById('chatLog').innerHTML = know[user] + "<br>"; }