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.

¿Existe una forma de nombrar dinámicamente los controladores de eventos en JavaScript?

01 Aug, 2023 Programación

Supongamos que tengo un grupo de botones, cada uno de los cuales asigna un color diferente a un elemento al hacer clic en él. Por lo tanto, el botón rojo hace que el elemento clicado se vuelva rojo.

<div id="color-pickers">
      <button id="red" class="picker"><span class="sr-only">rojo</span></button>
      <button id="orange" class="picker"><span class="sr-only">naranja</span></button>
      <button id="yellow" class="picker"><span class="sr-only">amarillo</span></button>
      ...
</div>

En lugar de escribir un controlador de eventos para cada uno, me gustaría escribir uno dinámicamente con un nombre asignado.

Hasta ahora, he intentado crear un array de nombres de colores:

const colors = ['rojo', 'naranja', 'amarillo', ...]

y luego recorrer ese array:

for (i = 0; i < colors.length; i++) {
    // para cada color en el array, asignarlo a un botón
    colors[i].addEventListener("click", function () {
        ...
    });
}

Esperando obtener red.addEventListener..., orange.addEventListener..., etc.
Pero en cambio, esto da como resultado: TypeError: colors[i].addEventListener is not a function.

He intentado usar literales de plantilla sin éxito. Esto parecía prometedor, pero no funcionó (posiblemente porque no estoy seguro de entender completamente lo que está sucediendo allí).

Gracias de antemano, y avíseme si puedo aclarar algo.

Para aclarar:

Estoy tratando de evitar escribir algo como esto:

red.addEventListener("click", function() {
    doSomething...
});
orange.addEventListener("click", function() {
    doSomething...
});
yellow.addEventListener("click", function() {
    doSomething...
});

En su lugar, quiero escribir la lista de colores una vez y luego usar esa lista para completar la parte que viene antes de addEventListener. Terminé utilizando la segunda parte de la respuesta de @Titulum, con la lista de botones existentes. Es posible que vaya un paso más allá y cree los botones programáticamente también, pero por ahora, hace lo que quiero. Gracias a todos.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el enfoque actual es que los nombres de color en la matriz colors son solo cadenas de texto, no son elementos de botón reales. Por lo tanto, llamar a addEventListener en ellos resulta en un TypeError ya que no tienen ese método.

    Una solución es crear una matriz de los elementos de botón reales y recorrerlos en su lugar. Por ejemplo:

    <div id="color-pickers">
  <button id="red" class="picker"><span class="sr-only">red</span></button>
  <button id="orange" class="picker"><span class="sr-only">orange</span></button>
  <button id="yellow" class="picker"><span class="sr-only">yellow</span></button>
  ...
</div>

    const colorButtons = document.querySelectorAll('.picker');

for (let i = 0; i < colorButtons.length; i++) {
  const color = colorButtons[i].id;
  colorButtons[i].addEventListener('click', function() {
    // código para establecer el color del elemento clicado
  });
}

    Aquí, document.querySelectorAll('.picker') devuelve un NodeList de todos los elementos de button con la clase picker. Luego podemos recorrer ese NodeList y adjuntar un event listener de clic a cada uno, estableciendo la variable color en el id del botón (que podemos usar para establecer el color del elemento clicado).

    De esta manera, solo necesitamos configurar los botones una vez en el HTML, y el código del event listener se genera dinámicamente en función de los botones existentes.

Comments are closed.