hw8

[terratamo]

mmmm

[epq]

Good job structuring your code!
Your program is so close to working, but it doesn't produce any output!
Do you know why? (Hint: see how you're loading your script in the html)

Click here for the answer

That has to do with how you're loading the script - the position of where you include the <script> tag matters. Since you included the script up top, the script is loaded before the DOM/HTML elements are ready, so the result of document.querySelector("#submit") for getting the submit button is null and you can't attach the event listener to it. You can solve this by adding the defer attribute to the <script> tag so that the script is executed when the page is finished parsing.

Like this:

  <script src="script/script.js" defer></script>

Now your chatbot produces output!

[epq]

Instead of comparing question.value with the string "hello", you should compare question.value with the input of your object, ioChatbot.

[epq]

You should update this value with the output of ioChatbot

[epq]

For your callback function, it's not necessary to create an anonymous function (a function with no name, i.e. function() { ... }) and call reply() inside of it. It works, but you can just pass in the name of your reply function directly. Like this:

 document.querySelector("#submit").addEventListener("click", reply);

Or your callback function can be an anonymous function like below. If you do this, you don't need to write a separate reply function because you have included it inline:

 document.querySelector("#submit").addEventListener("click", function() {
   const question = document.querySelector("#input");
   if(question.value === "hello"){
       document.querySelector("#output").textContent = "hi";
   } else{
       document.querySelector("#output").textContent = "I don't understand that command. Please enter another.";
   }
});