텍스트가 사라지는 이유는 무엇입니까?

Question

나는 아주 간단한 chatbox를 코딩하고있다. 양식에 쓰는 텍스트는 채팅 영역에 표시되지 않습니다. 사실, 그것은 chatarea에서 두 번째 이후로 볼 수 있습니다. 채팅 영역에 메시지를 보관하려면 어떻게해야합니까?

$(document).ready(function() { 
 
    $("#submitMsg").click(function() { 
 
    var userMessages = $("#userMsg").val(); // stored content in the text box 
 
    var prevMessage = $("#chatArea").html(); 
 
    $("#userMsg").val(""); // clear textbox 
 
    $("#chatArea").html(prevMessage + "<br>" + userMessages); 
 
    }); 
 
});

#wrapper { 
 
    padding-bottom: 25px; 
 
    background: #ACD8F0; 
 
    ; 
 
    width: 604px; 
 
    border: 1px solid #ACD8F0; 
 
} 
 
#chatArea { 
 
    width: 450px; 
 
    border: 1px solid black; 
 
    height: 450px; 
 
    margin: auto; 
 
    background: #fff; 
 
} 
 
#userMsg { 
 
    position: relative; 
 
    left: 75px; 
 
    margin-top: 5px; 
 
} 
 
#submitMsg { 
 
    position: relative; 
 
    left: 80px; 
 
    font-size: 24px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="header"> 
 
    <p class="Welcome">Welcome</p> 
 
    </div> 
 
    <div id="chatArea"></div> 
 
    <form id="ChatInput"> 
 
    <textarea id="userMsg" name="message" type="text" placeholder="Enter your text here.." rows="3" cols="50"></textarea> 
 
    <input type="submit" name="Send" value="SEND" id="submitMsg"> 
 
    </form> 
 
</div>

Answer 1

문제는 당신의 제출 버튼에있다 (내 브라우저에서 제대로 jsfiddle에 있지만 작동). 동작이 지정되지 않은 폼은 현재 페이지에 대한 GET/POST 요청을 기본값으로 지정하므로 다시로드됩니다. 'type = "submit"을 (를) <input type="submit" name="Send" value="SEND" id="submitMsg">에서 제거하면 올바르게 작동합니다. 또는 양식 태그에 action="javascript:void(0);"을 추가하면 문제도 해결됩니다.

Answer 2

아마도 이것일까요? 이것이 당신이 찾고있는 것인지 확실하지 않지만 이벤트 객체를 사용하여 기본 동작을 방지 할 수 있습니다.

$(document).ready(function() { 
    $("#submitMsg").click(function(e) { 
    e.preventDefault(); 
    var userMessages = $("#userMsg").val(); // stored content in the text box 
    var prevMessage = $("#chatArea").html(); 
    $("#userMsg").val(""); // clear textbox 
    $("#chatArea").html(prevMessage + "<br>" + userMessages); 
    }); 
});