Question

我一直在关注如何设计自己的聊天机器人的YouTube教程几个小时，并发现自己陷入困境。一切都很顺利，除非我在聊天机器人输入内容时它会响应它，但不会显示我发送给它的消息，它也只显示聊天机器人发送给我的最后一条消息,来自它或我的任何其他消息。 Here is a JsFiddle of my chatbot so far有谁知道为什么会这样，我可以做些什么来解决这个问题？

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来覆盖$().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);

    });

});

改善我的聊天机器人？

2 个答案: