テキストが消えるのはなぜですか？

Question

私は非常に単純なチャットをコーディングしています。フォームに書き込んだテキストはチャットエリアに表示されません。実際には、それはchatareaから2番目と後に見られます。チャットエリアにメッセージを保存するにはどうしたらいいですか？ （それはjsfiddleではなく、私のブラウザで正常に動作します）

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

問題は、あなたの送信ボタンです。アクションが指定されていないフォームは、現在のページの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); 
    }); 
});