1

Actualmente tengo un formulario donde, al dar a un botón + (generado dinámicamente también), agrego un input con name plus_p, plus_t o plus_b al div padre, dependiendo de a qué botón haya hecho clic (cada botón está en un div.sortable diferente):

introducir la descripción de la imagen aquí

addInpt(e){
      var tag = e.target;
      var sib = tag.parentNode;
      console.log(sib);
      if (sib == document.querySelector(".sortable_p")){
         console.log("P");
         var input = document.createElement("input");
         input.type = "text";
         input.name = "plus_p";
         sib.appendChild(input);
      } else if (sib == document.querySelector(".sortable_t")){
         console.log("T");
         var input = document.createElement("input");
         input.type = "text";
         input.name = "plus_t";
         sib.appendChild(input);
      } else if (sib == document.querySelector(".sortable_b")){
         console.log("B");
         var input = document.createElement("input");
         input.type = "text";
         input.name = "plus_b";
         sib.appendChild(input);
      }
   }

El problema viene cuando, al añadir OTRO campo, el botón correspondiente a generar un cuarto input dentro de ese campo, no funciona correctamente, es decir, consigue escribir por consola el div padre, que en este caso, sería sortable_p, pero no ejecuta correctamente el appendChild():

introducir la descripción de la imagen aquí

¿Cómo puedo hacer que añada inputs dinámicamente con y cada uno de los botones?

(Aquí dejo la template que uso para generar dinámicamente los sortable_p,t y b)

<template  id="temp-power">
   <div class="box-power">
      <label class="lbl-tmp-crd" contenteditable='true' data-name="labe_power">POWER</label>
      <div class="sortable_p" draggable="true">
            <input type="text" name="t_power"/>
            <input type="text" name="v_power"/>
            <input type="text" name="p_power">
            <button type="button" class="btn-event-addInpt" title="Añadir">+</button>
            <button type="button" class="btn-event-disAble powr" title="Deshabilitar">X</button>
            <button type="button" class="btn-event-erase" title="Borrar">-</button>
            <div class="draggl">
               <div class="bar1"></div>
               <div class="bar2"></div>
               <div class="bar3"></div>
            </div>
      </div>
   </div>

</template> 

2 respuestas 2

2

Respondiendo a la duda al final de tu respuesta:

NO ENTIENDO, el e.target SOLO mira al primer elemento

event.target (o e.target) contiene solo el elemento que disparó el evento y, necesariamente, debes obtener el padre para hacer las modificaciones correspondientes. Dependiendo de la estructura HTML, puede servir elemento.parentNode, aunque es más confiable element.closest(selector), pero el padre debe tener algo único que lo identifique, de preferencia etiqueta o clase.

Estás complicando un poco la lógica, porque:

  1. Con sib == document.querySelector(".sortable_p") estás comparando el elemento padre con el primer elemento del documento que tiene la clase especificada. Funcionaría si solo hay uno.
  2. Según tu propia respuesta, con sib = document.querySelector(".sortable_p"), es prácticamente lo mismo, solo analizas si el elemento con la clase especificada existe en el documento y fue asignada correctamente a la variable.

En ambos casos, multiplicas código para generar cada input y lo único que cambia es el nombre; entonces, solo necesitas crear el elemento y asignar el nombre, dependiendo de la clase del padre usando elemento.classList.contains('nombre-de-clase') (Referencia de classList):

addInpt(e) {
  // Elemento (botón) que disparó el evento
  let tag = e.target;
  // Desde el botón, obtener padre
  let sib = tag.parentNode;
  // Confirma que el elemento padre es correcto
  console.log(sib);

  // Crear input
  let input = document.createElement('input');
  input.type = 'text';

  // No es necesario crear nuevas variables, solo saber la clase del padre
  if(sib.classList.contains('sortable_p') {
      input.name = 'plus_p';
  } else if(sib.classList.contains('sortable_t') {
      input.name = 'plus_t';
  } else if(sib.classList.contains('sortable_b') {
      input.name = 'plus_b';
  }

  // Agregar input a contenedor padre
  sib.appendChild(input);
}

El problema que parece haber aquí es que si agregas más de un input en un contenedor, todos van a tener el mismo nombre y se va a complicar acceder a ellos.

1
  • No conocía el classList.contains, creo que me va a ayudar mucho. Y ese es el problema, repito mucho código solamente para cambiar nombres, por eso me han dicho que todo el código que tengo se puede reducir a la tercera parte de lo que ya hay, y es lo que me han mandado aprender ahora, optimizarlo XD Muchas gracias por tu ayuda!!
    – AQMR
    Commented el 3 mar. 2021 a las 7:49
0

Lo conseguí, lo que hice fue:

addInpt(e){
      var tag = e.target;
      var sib = tag.parentNode;
      console.log(sib);
      if (sib = document.querySelector(".sortable_p")){
         var input = document.createElement("input");
         input.type = "text";
         input.name = "plus_p";
            var tag_p = e.target;
            var sib_p = tag_p.parentNode;
            sib_p.appendChild(input);
      } else if (sib = document.querySelector(".sortable_t")){
         var input = document.createElement("input");
         input.type = "text";
         input.name = "plus_t";  
            var tag_t = e.target;
            var sib_p = tag_t.parentNode;
         sib_p.appendChild(input);
      } else if (sib = document.querySelector(".sortable_b")){
         var input = document.createElement("input");
         input.type = "text";
         input.name = "plus_b";
            var tag_b = e.target;
            var sib_b = tag_b.parentNode;
         sib_b.appendChild(input);
      }
   }

Añadir variables distintas asignando el e.target y el parentNode porque, por alguna razón que NO ENTIENDO, el e.target SOLO mira al primer elemento. Si alguien tiene la amabilidad de explicármelo, se lo agradecería, porque no entiendo absolutamente nada del por qué es así.

Tu Respuesta

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

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