改進我的Chatbot？

Question

我一直在關注如何設計自己的chatbot幾個小時的YouTube教程，並發現自己卡住了。一切都很好，除非我在聊天機器上輸入了一些東西，但它並沒有顯示我發送給它的消息，它也只顯示聊天機器發給我的最後一條消息,從來沒有任何其他消息它或我。 Here is a JsFiddle of my chatbot so far有誰知道爲什麼會發生這種情況，我能做些什麼來解決這個問題？

Answer 1

的問題是您通過調用$().html而不是$().append來覆蓋當前的#container的HTML。您應該調用$().append向容器的當前HTML添加值而不覆蓋它。在每次嘗試更改容器的HTML以將消息分隔一行後，您還應該添加<br>。

這是你的jsfiddle：http://jsfiddle.net/3wySt/10/

的Javascript

var username = ""; 

function send_message(message){ 
    $("#container").append("<span class=&bot&><b>Chatbot:</b> </span>" + message + "<br>"); //Notice the .append instead of .html and the <br> 
} 

function get_username(){ 
    send_message("Hello, what is your name?"); 
} 

function ai(message){ 
    if (username.length < 3){ 
     username = message; 
     send_message("Nice to meet you " + username + ", how are you doing?"); 
    } 
} 

$(function(){ 

    get_username(); 

    $("#textbox").keypress(function(event){ 
     if (event.which == 13){ 
      if ($("#enter").prop("checked")){ 

       $("#send").click(); 
       event.preventDefault(); 

      } 

     } 

    }); 

    $("#send").click(function(){ 

     var username = "<span class=&quot;username&quot;>You: </span>"; 

     var newMessage = $("#textbox").val(); 

     $("#textbox").val(""); 

     var prevState = $("#container").html(); 

     if (prevState.length > 3){ 
      prevState = prevState + ""; 
     } 

     $("#container").html(prevState + username + newMessage + "<br>"); //Notice the <br> 

     $("#container").scrollTop($("#container").prop("scrollHeight")); 

     ai(newMessage); 

    }); 

}); 

Answer 2

更新小提琴：http://jsfiddle.net/3wySt/9/

我已經更新了你的小提琴，問題是用下面的函數它被替換，而不是追加到它的整個HTML：

function send_message(message){ 
    $("#container").html("<span class=&bot&><b>Chatbot:</b> </span>" + message); 
}