Estoy jugando aprendiendo cómo crear un bot de chat HTML, CSS, JS muy simple y me encontré con algunos problemas con los que espero que alguien pueda ayudarme.
Cuando escribo "Hey", sale "¡Hola!" como se esperaba, pero cuando pruebo mi respuesta de "enlace de prueba" no puedo encontrar la manera de mostrarlo. ¿Alguna idea de lo que podría estar haciendo mal? Para aclarar, cuando el usuario escribe "enlace de prueba", quiero que salga "Puedo ayudarlo a encontrar lo que está buscando. ¡Haga clic aquí!" con "¡Haga clic aquí!" siendo un enlace a google.com.
¡Cualquier ayuda sería muy apreciada!
<script> function talk(){ var know = { "Hey":"Hello!", "test link":"I can help you find what you're looking for." + <a href="https://www.google.com/">Click Here!</a> }; var user = document.getElementById('userBox').value; document.getElementById('chatLog').innerHTML = user + "<br>"; if(user in know){ document.getElementById('chatLog').innerHTML = know[user] + "<br>"; }else{ document.getElementById('chatLog').innerHTML = "I do not understand."; } } </script>Su valor de enlace de prueba no es una sola cadena porque sus comillas no están alrededor del valor completo de la propiedad. Pruebe esto: "test link":`I can help you find what you're looking for. <a href="https://www.google.com/">Click Here!</a>`
No puede anidar las mismas comillas sin escaparlas o usar literales de plantilla (comillas invertidas)
"test link": `I can help you find what you're looking for. <a href="https://www.google.com/">Click Here!</a>`Vea el ejemplo de trabajo en mi fragmento a continuación:
Recomiendo detectores de eventos en lugar de controladores de clics
si envuelve un formulario, enter ejecutará la función
Escriba test link en el campo para ver el enlace
const know = { "hey": "Hello! Type <span class=\"cursive\">test link</span> to see the link", "test link": `I can help you find what you're looking for. <a href="https://www.google.com/">Click Here!</a>` }; window.addEventListener("load", function() { // when page loads document.getElementById("testForm").addEventListener("submit", function(e) { // pass the event e.preventDefault(); // so we can block the submit const user = document.getElementById('userBox').value.toLowerCase(); // handle hey AND HEY and Hey document.getElementById('chatLog').innerHTML = user + "<br>"; if (user in know) { document.getElementById('chatLog').innerHTML = know[user] + "<br>"; } else { document.getElementById('chatLog').innerHTML = "I do not understand."; } }) }) .cursive { color: red; font-style: italic; } <form id="testForm"> <input type="text" id="userBox" /> </form> <div id="chatLog"></div>