Escribí los códigos a continuación para mostrar los nombres de los usuarios cuando el usuario ingresa su nombre. Pero el nombre aparecerá y desaparecerá inmediatamente. ¿Qué está mal?
codigos html
<div> <p id="names"></p> </div> <form method = "get" action = ""> Enter first name: <input type = "text" id = "firstName"/> Enter last name: <input type = "text" id = "lastName"/> <input type = "submit" value = "submit" onclick = "return firstName_lastName();"/> </form>código JavaScript
function firstName_lastName() { var firstName = document.getElementById('firstName').value; var lastName = document.getElementById('lastName').value; var names = document.getElementById('names'); if (firstName == "" || lastName == "") { alert('Please fill in all the fields'); return false; } else { names.innerHTML = firstName + " " + lastName; return true; }El código funciona pero los nombres aparecen y desaparecen inmediatamente.
Editar: el código se ejecuta, pero cuando se hace clic en el botón Enviar, el nombre y apellido ingresados aparecen en el navegador y desaparecen inmediatamente. La alerta también funciona perfectamente cuando uno o ambos campos no están llenos.
el botón enviar es básicamente enviar el formulario al servidor y recargar la página cuando se hace clic, pero si desea validar antes de enviar, puede usar preventDefault para detener la recarga de la página, vea el ejemplo a continuación
function firstName_lastName(event) { event.preventDefault() // to stop submit var firstName = document.getElementById('firstName').value; var lastName = document.getElementById('lastName').value; var names = document.getElementById('names'); if (firstName == "" || lastName == "") { alert('Please fill in all the fields'); } names.innerText = `${firstName} ${lastName}` } <div> <p id="names"></p> </div> <form method = "get" action = ""> Enter first name: <input type = "text" id = "firstName"/> Enter last name: <input type = "text" id = "lastName"/> <input type = "submit" value = "submit" onclick = " firstName_lastName(event);"/> </form>