Soy nuevo en JS, y estaba creando un formulario donde haría clic en el botón Guardar y el texto ingresado se mostraría en la página, pero cuando hago clic en el botón Guardar, el cambio se muestra por un segundo y desaparece.
Código fuente :
function save(){ save_element = document.getElementById("input_element").value; console.log(save_element); document.getElementById("saved_text").innerText += save_element; } <html> <head> <title> Practising JS </title> </head> <body> <form action=""> Name: <input type="text" placeholder="Enter a Text" id = "input_element"> <br> <button id = "ds" onclick="save()">SAVE</button> <h1 id = "saved_text"></h1> <script src="./index.js"></script> </form> </body> </html><html> <head> <title> Practising JS </title> </head> <body> <form action="#"> Name: <input type="text" placeholder="Enter a Text" id = "input_element"> <br> <button id = "ds" onclick="save()">SAVE</button> <h1 id = "saved_text"></h1> <script src="./index.js"></script> </form> </body> </html> Pruebe <form action="#"> , al usar esto, su página no se volverá a cargar. El comportamiento predeterminado de <form action=""> es enviar, por lo que volverá a cargar la página.
El comportamiento predeterminado del <form> es enviar los datos del formulario al servidor. Debe evitar este comportamiento predeterminado mediante preventDefault .
function save(event) { event.preventDefault(); // Skip default behaviour const save_element = document.getElementById("input_element").value; console.log(save_element); document.getElementById("saved_text").innerText += save_element; } <html> <head> <title> Practising JS </title> </head> <body> <form action=""> Name: <input type="text" placeholder="Enter a Text" id="input_element"> <br> <button id="ds" onclick="save(event)">SAVE</button> <h1 id="saved_text"></h1> <script src="./index.js"></script> </form> </body> </html>Ok, el cambio desaparece porque la página se está recargando a algo en blanco.
<form action="">cambiar a un hash como
<form action="#">Proporcione a su formulario una identificación. Luego, al hacer clic en el evento, evite el valor predeterminado ... como este
let form = document.getElementById("MyForm"); //Custom Event ... form.addEventListener('submit', (e) => { // on form submission, prevent default e.preventDefault(); //your other Code to change the text });Esto evitará que el formulario haga que su página se vuelva a cargar.