1

En el programa que intento optimizar tengo 3 funciones que siguen la misma estructura pero con distintos nombres, me gustaría poder hacer un bucle for, declarando tantas funciones como botones tenga dentro del formulario.

El formulario tiene 3 botones, por tanto, 3 funciones.

El programa lo tengo con una class en javascript, por lo que no me deja hacer el bucle fuera de lo que no sea una función:

class cls0{

   constructor(id, idtxt, params){

      var tem = document.querySelectorAll("template");

        this.id=id;

      let f0 = document.createElement('div');
      f0.innerHTML = tem[3].innerHTML;
      document.getElementById(id).appendChild(f0);

      this.contentForm = f0.querySelector(".content-form");

      f0.querySelector(".btn-event-sndFrm").addEventListener("click", ()=>{
         //this.sndFrm();
         console.log('Hola');
      });

      f0.querySelector(".btn-event-addFrm").addEventListener("click",()=>{
         //this.addFrm();
         //this.sndFrm();
         console.log('Adios');
      });

      f0.querySelector(".btn-event-delFrm").addEventListener("click", ()=>{
         //this.delFrm();
         console.log('Aaron');
      });

      for (let i in params){
         var hi0 = document.createElement('input');
         hi0.type = 'hidden'; //cambiar a text si hay que verlo
         hi0.name = i;
         hi0.value = params[i];

         f0.querySelector('form').appendChild(hi0);
      }

      this.structure();
   }

   structure(){
      var ff = document.f0.querySelectorAll()
   }
}

Hasta ahora lo que he intentado es, desde el final del constructor, hacer una llamada directa a la función structure()

Lo malo es que no se sacar la variable f0, y realmente tampoco se si es la manera correcta de hacer lo que quiero.

1
  • ¿Quieres crear funciones dentro del ciclo o solo asignar los eventos que corresponden a cada botón? Por otra parte, si quieres usar f0 en otros métodos de la clase, en lugar de let f0 = ... usa this.f0 = ... para crearla como propiedad.
    – Triby
    el 2 mar. 2021 a las 16:52

1 respuesta 1

1

Podrías usar un arreglo que tenga el identificador de botones y también será el nombre de la función a ejecutar. Todo esto en el constructor:

// Crear arreglo con identificado re botones y función
const buttons = ['addFrm', 'delFrm', 'sendFrm'];

// Para que f0 esté disponible en otros métodos:
this.f0 = document.createElement('div');

// Recorrer para asignar eventos
buttons.forEach(btn => {
    let button = this.f0.querySelector('.btn-event-' + btn);
    // Asignar función a ejecutar, enlazando instancia de la clase
    button.addEventListener('click', this[btn].bind(this));
});

En la primera iteración del ciclo btn contiene addFrm, por lo que se selecciona el botón con clase .btn-event-addFrm y se ejecuta el método this['addFrm'](), que es equivalente a this.addFrm().

Por supuesto, debes crear los métodos para cada botón, solo un ejemplo:

class cls0 {
    constructor(/* parámetros */) {
        /* Todo el código necesario, incluyendo asignación de eventos */
    }
    addFrm() {
        // Instancia de la clase
        console.log(this);

        // Acceso a otras propiedades
        console.log(this.f0);
    }
}

Actualización:

Para crear solo un método para todos, nada recomendable 1:

// Recorrer para asignar eventos
buttons.forEach(btn => {
    let button = this.f0.querySelector('.btn-event-' + btn);
    // Asignar función a ejecutar, enlazando instancia de la clase
    button.addEventListener('click', this.clickHandler.bind(this));
});

Tu método:

clickHandler() {
    // Saber qué botón desencadenó el evento
    let btn = event.target;
    // Analizar por clase para realizar acciones
    if(btn.classList.contains('btn-event-addFrm')) {
        // Agregar
    } // else if para analizar resto de botones
}

1: No es recomendable tener las acciones de todos los botones en una única función porque, probablemente te ahorres un par de líneas de código, pero el costo va a ser muy alto, complicando la lectura, comprensión y mantenimiento.

En la medida de lo posible, trata de crear funciones que cumplan con el principio de responsabilidad única. A veces puede ser difícil, pero te va a ayudar a crear mejores códigos.

3
  • De esta forma, según llego a ver, seguiría haciendo tres funciones con la misma estructura no? La intención en todo esto es ahorrarse código, y si sigue una secuencia exacta, como es el caso, hacer una estructura que cambie dependiendo de a qué botón des, un bucle con if else creo que sería, vaya, pero bueno, me has dado una pista de por dónde empezar, a ver si me sale. Muchas gracias =3
    – AQMR
    el 3 mar. 2021 a las 7:24
  • @Aaronibio, revisa la actualización.
    – Triby
    el 3 mar. 2021 a las 15:05
  • Muchas gracais @Triby
    – AQMR
    el 4 mar. 2021 a las 7:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.