Buenos dias,
Tengo un archivo HTML que le pregunta al usuario cuál es su nombre seguido de un cuadro de texto y un botón.
Aquí está mi HTML
<form> <p>What's your name?</p> <input id="input" type="text" placeholder="Dwayne Johnson..." /> <button id="button">Click Me</button> <p id="greet"></p> </form>Luego tengo mi javascript que toma la entrada (un nombre) del usuario y muestra un mensaje en la pantalla.
Aquí está mi Javascript
let input = document.getElementById("input"); let button = document.getElementById("button"); let greet = document.getElementById("greet"); // function to greet user (homepage) button.addEventListener ("click", greetingUser); function greetingUser() { greet.textContent = `Nice to meet you, ${input.value}!` }Si ingreso un nombre, mostrará el mensaje por un segundo y luego desaparecerá inmediatamente de la pantalla.
Aprecio que este sea un problema bastante simple, pero lo estoy encontrando complicado. Soy nuevo en la manipulación de DOM y los controladores de eventos. ¿Alguien puede explicar dónde me estoy equivocando?
¡Muchas gracias! :)
Es porque la página se vuelve a cargar después de hacer clic en el botón. Puede usar prevenir predeterminado para evitar eso.
Puede agregar prevenir el incumplimiento en su función de esta manera:
function greetingUser(event) { event.preventDefault() greet.textContent = `Nice to meet you, ${input.value}!` }El problema es que usó un <form> , ese formulario se enviará y causará el problema, si solo necesita mostrar el nombre, no use un formulario como:
let input = document.getElementById("input"); let button = document.getElementById("button"); let greet = document.getElementById("greet"); // function to greet user (homepage) button.addEventListener("click", greetingUser); function greetingUser() { greet.textContent = `Nice to meet you, ${input.value}!` } <p>What's your name?</p> <input id="input" type="text" placeholder="Dwayne Johnson..." /> <button id="button">Click Me</button> <p id="greet"></p> Si, por otro lado, necesita mostrar el nombre y luego enviar el formulario con otro botón, debe usar preventDefault() como:
let input = document.getElementById("input"); let button = document.getElementById("button"); let greet = document.getElementById("greet"); // function to greet user (homepage) button.addEventListener("click", greetingUser); function greetingUser(e) { e.preventDefault(); greet.textContent = `Nice to meet you, ${input.value}!` } <form> <p>What's your name?</p> <input id="input" type="text" placeholder="Dwayne Johnson..." /> <button id="button">Click Me</button> <p id="greet"></p> </form>No tiene que cambiar su marcado, pero insertar una llamada al método preventDefault() en el objeto de evento debería evitar que se envíe el formulario.
let input = document.getElementById("input"); let button = document.getElementById("button"); let greet = document.getElementById("greet"); // function to greet user (homepage) button.addEventListener ("click", greetingUser); function greetingUser(event) { event.preventDefault(); greet.textContent = `Nice to meet you, ${input.value}!` }