javascript - 私のチャットボットを改善しますか?

Question

独自のチャットボットを設計する方法に関する YouTube チュートリアルを数時間続けてきましたが、行き詰っていることに気づきました。チャットボットに何かを入力すると応答しますが、送信したメッセージは表示されません。また、チャットボットから送信された最後のメッセージのみが表示され、,他のメッセージは表示されません。それともわたし。これまでのところ、私のチャットボットの JsFiddle ですなぜこれが起こっているのか、そして問題を解決するために何ができるのか誰か知っていますか?

Answer 1

問題は、 の代わりに を#container呼び出して の現在の HTML を上書きすることです。上書きせずにコンテナの現在の HTML に値を追加するには、 を呼び出す必要があります。また、コンテナーの HTML を変更しようとするたびに追加して、メッセージを改行で区切る必要があります。$().html$().append$().append<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);

    });

});