Estoy tratando de agregar elementos cuando se hace clic en un botón, mi código se ve así:
<!DOCTYPE html> <html> <head> </head> <body> <center> <form action="" method="POST" id="form-one"> <button onclick="addChargingSchedule()">Add</button> <div class="cs"></div> </form> </center> <script> var elem = document.getElementsByClassName("cs"); function addChargingSchedule() { var form = document.getElementById("form-one") var id = document.createElement("input"); id.setAttribute("type", "text"); id.setAttribute("name", "one"); id.setAttribute("id", "one"); id.setAttribute("placeholder", "1"); form.appendChild(id) } </script> </body> </html>El código funciona, cuando hago clic en el botón, se crea un texto de entrada, pero después de 0,1 segundos, la página se actualiza y la entrada desaparece nuevamente. Alguien sabe que estoy haciendo mal?
Puede agregar un detector de eventos de submit y detenerlo de esta manera:
form.addEventListener('submit', (event) => { event.preventDefault(); });Ejemplo de trabajo tomado por su código:
<!DOCTYPE html> <html> <head> </head> <body> <center> <form action="" method="POST" id="form-one"> <button onclick="addChargingSchedule()">Add</button> <div class="cs"></div> </form> </center> <script> var elem = document.getElementsByClassName("cs"); var form = document.getElementById("form-one") function addChargingSchedule() { var id = document.createElement("input"); id.setAttribute("type", "text"); id.setAttribute("name", "one"); id.setAttribute("id", "one"); id.setAttribute("placeholder", "1"); form.appendChild(id); } form.addEventListener('submit', (event) => { event.preventDefault(); }); </script> </body> </html>