CODEWITHSUNDEEP
javascripthtmlfunctionchatbot
user1300788
user1300788

Reputation: 181

Trouble outputting link within JS

I'm playing around learning how to create a very simple HTML, CSS, JS chat bot and I've ran into some trouble which I'm hoping someone could help me with.

When I type in "Hey" it outputs "Hello!" as expected, but when I try my "test link" response I can't figure out how to display it. Any ideas what I could be doing wrong? To clarify, when the user types in "test link" I want it to output "I can help you find what you're looking for. Click Here!" with "Click Here!" being a link to google.com.

Any help would be much appreciated!

<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>

Upvotes: 1

Views: 56

Answers (2)

mplungjan
mplungjan

Reputation: 177691

  • You cannot nest the same quotes without escaping them or using template literals (backticks)

    "test link": `I can help you find what you're looking for. <a href="https://www.google.com/">Click Here!</a>`

    See the working example in my snippet below:

  • I recommend event listeners instead of click handlers

  • if you wrap in a form, enter will run the function

Type test link into the field to see the link

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>

Upvotes: 2

Andr&#233;
Andr&#233;

Reputation: 2024

Your test link value is not a single string because your quotation marks are not around the whole property value. Try this: "test link":`I can help you find what you're looking for. <a href="https://www.google.com/">Click Here!</a>`

Upvotes: 2

Related Questions