es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Manejo del eventlistener

14 Jul, 2023 Programación

Estoy trabajando en el proyecto de mi universidad y es algo así como un juego web de texto. Por lo tanto, estoy interesado en un evento de clic en un documento para cambiar el contexto y lo hice con el código a continuación.

El problema es que sigue repitiendo todo y no permite escribir en la entrada.

const homepage = document.querySelector('#homepage')

document.addEventListener('click', function() {
  /* console.log para comprobar que la función se sigue repitiendo */
  console.log('comprobar')
  homepage.innerHTML = `<div> ¡Hola! ¿Cómo te llamas? </div>`
  document.addEventListener('click', function() {
    homepage.innerHTML = `<div> Mi nombre es 
    <br> 
    <input id="name">  <br>
    <button> enviar </button>
    `
  })
})

#homepage {
  text-align: center;
}

“`html

<div id="homepage"> haz clic para cambiar el contenido </div>

“`

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema es causado por los event listeners anidados de click. Cuando se hace clic en el documento, el primer event listener cambia el contenido de homepage para pedir el nombre del usuario. Sin embargo, también agrega otro event listener de clic que cambia el contenido nuevamente cuando se hace clic. Esto hace que la función se repita y la entrada no funcione correctamente.

    Para solucionar este problema, elimine el event listener anidado de clic y en su lugar use una declaración condicional para verificar si el usuario ha hecho clic en el botón de envío:

    const homepage = document.querySelector('#homepage');
let nameSubmitted = false;

document.addEventListener('click', function() {
  console.log('check');
  if (!nameSubmitted) {
    homepage.innerHTML = '<div>¡Hola, cuál es tu nombre?</div>';
  }
});

homepage.addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') {
    const nameInput = document.getElementById('name');
    const nameValue = nameInput.value;
    homepage.innerHTML = `<div>¡Hola, ${nameValue}!</div>`;
    nameSubmitted = true;
  }
});

    En este código actualizado, el event listener de clic inicial del documento solo cambia el contenido si el nombre aún no se ha enviado. El event listener de clic de homepage escucha los clics en el botón de envío y cambia el contenido con el nombre enviado. La variable nameSubmitted se utiliza para realizar un seguimiento de si el nombre ya se ha enviado para evitar que la función se repita.

Comments are closed.