Aquí está el html que escribí para el programa.
Está funcionando pero agregar no funciona.
<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>nombre y comentario son entradas.
Escribo algo de texto pero el anexo no funciona y el nuevo texto que ingresé reemplaza al primero.
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>No estoy seguro de por qué está repitiendo la propiedad de nombre, ¡pero aquí hay un ejemplo de trabajo!
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>