컨테이너에 텍스트가 표시되지 않습니까?

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

들여 쓰기가 부족하기 때문에보기가 어렵지만 기능이 조금 뒤죽박죽입니다. 예를 들어 keypress 처리기 내에서만 click 처리기를 할당합니다. 당신이 그것을 시도 할 수 있도록 여기에

$("#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