javascript - 改进我的聊天机器人？

Question

几个小时以来，我一直在关注有关如何设计自己的聊天机器人的 YouTube 教程，但发现自己陷入了困境。一切都很好，除了当我向聊天机器人输入内容时，它会响应它但不显示我发送给它的消息，它也只显示聊天机器人发送给我的最后一条消息，,从来没有来自它的任何其他消息或者我。到目前为止，这是我的聊天机器人的 JsFiddle有谁知道为什么会这样以及我能做些什么来解决这个问题？

Answer 1

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

我已经更新了你的小提琴，问题出在下面的函数上，它替换了整个 html 而不是附加到它：

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

Answer 2

问题是您#container通过调用$().html而不是覆盖当前 HTML $().append。您应该调用$().append向容器的当前 HTML 添加值而不覆盖它。您还应该<br>在每次尝试更改容器的 HTML 后添加，以用新行分隔消息。

这是你的 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);

    });

});