Текст не отображается в контейнере?

Question

Я пишу код для Chatbot, и все идет хорошо, за исключением того, что текст, который я пишу в текстовом поле, не отображается в моем контейнере. Вот весь код, который участвует в тексте появляются в контейнере:

<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