改进我的聊天机器人？

Question

几个小时以来，我一直在关注一个关于如何设计自己的聊天机器人的YouTube教程，我发现自己陷入了困境。一切都进行得很顺利，除了我向聊天机器人输入某些内容时，它对它作出了响应，但没有显示我发送给它的消息，而且它只显示了聊天机器人发送给我的最后一条消息，而不是来自它或我的任何其他消息。到目前为止，这是我的聊天机器人的JsFiddle，有人知道为什么会发生这种情况吗?我能做些什么来解决这个问题？

Answer 1

问题是，您通过调用#container而不是$().append来覆盖当前的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

更新Fiddle: http://jsfiddle.net/3wySt/9/

我已经更新了您的小提琴，问题在于它替换了整个html，而不是附加在它后面的函数：

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