javascript - 文本没有出现在容器中？

Question

我正在为聊天机器人编写一些代码，一切都很好，只是我在文本框中写的文本没有出现在我的容器中。以下是容器中出现的文本所涉及的所有代码：

<div id = "controls">
<textarea id = "textbox" placeholder = "Enter your message here..."></textarea>
<button id = "send">Send</button>
<br />
<input checked type="checkbox" id = "enter" /> 
<label>Send on enter</label>
</div>

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

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

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

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

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

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

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


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

$("#container").html(prevState + username + newMessage);


    }
    });

有谁知道为什么这段代码不起作用？

Answer 1

因为没有缩进，很难看出来，但是你的功能有点乱。例如，您只在click处理程序内部分配处理keypress程序。我清理了这样的代码：

$("#send").click(function (event) {
    send();
});

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

function send() {
    var username = "<span class =  'username' =>You: </span>";
    var newMessage = $("#textbox").val();   
    $("#textbox").val("");    
    var prevState = $("#container").html();
    if (prevState.length > 3) {
        prevState = prevState + "<br />";
    }
    $("#container").html(prevState + username + newMessage);
}

这是一个小提琴，所以你可以试试：DEMO