新输入替换而不是追加

Question

Here is the html that I wrote for program

It's working but append is not working.

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container m-5"> <div class="row"> <div class="col-md-6 justify-content-center"> <span>Full Name :</span> <input id="name" type="name" class="d-flex mb-3"> <span>Email :</span> <input id="email" type="email" name="email" class="d-flex mb-3"> <span>Comment :</span> <input id="comment" type="text" class="d-flex mb-3"> <button id="btn" class="mt-3">Submit</button> </div> <div class="col-md-6"> <p id="demo"></p> </div> </div> </div>

name and comment are inputs.

I type some text but append doesn't working and the new text that entered replace the first one.

 function SubmitComment(name, comment) { let newComment = censor(comment) for (let i = 0; i < name.length; i++) { let demo = $("#demo"); demo.html("") demo.append(` <h4>${name.val()} :</h4> <br> <p>${newComment}</p> `) } } function censor(comment) { var splitString = comment.val().split(" ") for (let b = 0; b < splitString.length; b++) { if (splitString[b] == "duck") { splitString[b] = '****'; } if (splitString[b] == "swan") { splitString[b] = '****'; } } var joinArray = splitString.join(" "); return joinArray; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Am not sure why your looping the name property, but here is a working example!

 function Submit() { SubmitComment($('.name'), $('.comment')); } function SubmitComment(name, comment) { let newComment = censor(comment) let demo = $("#demo"); demo.html("") for (let i = 0; i < name.length; i++) { demo.append(` <h4>${name.val()} :</h4> <br> <p>${newComment}</p> `) } } function censor(comment) { var splitString = comment.val().split(" ") for (let b = 0; b < splitString.length; b++) { if (splitString[b] == "duck") { splitString[b] = '****'; } if (splitString[b] == "kilt") { splitString[b] = '****'; } } var joinArray = splitString.join(" "); return joinArray; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="name" /> <input class="comment" /> <button onClick="Submit()">Submit</button> <div id="demo"></div>