1

Estoy intentando hacer un array que obtenga los valores de una serie de 3 inputs dentro de divs generados dinámicamente.

Cada input tiene su evento change con el cual se cambia el valor correspondiente del objeto[0] del array. Una vez generamos otro div, esta lógica hace aguas por todas partes, ya que, por ejemplo, el segundo input del segundo div, cambiaría el segundo valor del PRIMER objeto del array. Objeto[0].

let array = [];
let info = [];

if (array.length == 0) {
  createElements();
  doTxt();
}

function createElements() {

  let div = document.createElement('div');
  let Finp = document.createElement('input');
  let Sinp = document.createElement('input');
  let Tinp = document.createElement('input');

  div.setAttribute('class', 'content');
  div.style.backgroundColor = 'red';
  div.style.width = '500px';
  div.style.height = '50px';
  Finp.setAttribute('class', 'F-uno');
  Sinp.setAttribute('class', 'S-dos');
  Tinp.setAttribute('class', 'T-tres');

  info.push({
    value_1: Finp.value,
    value_2: Sinp.value,
    value_3: Tinp.value
  });

  doTxt(info);


  Finp.addEventListener('change', (e) => {
    let chk = checkVacuum();

    if (Finp.value == '' && Sinp.value == '' && Tinp.value == '' && document.querySelectorAll('.content').length > 1) {
      div.remove();
    } else if (Finp.value != '' && chk != true) {
      createElements();
    }

    info[0].value_1 = Finp.value; //Este 0 deberia cambiar
    doTxt(info);
  });

  Sinp.addEventListener('change', (e) => {
    if (Sinp.value == '' && Finp.value == '' && Tinp.value == '' && document.querySelectorAll('.content').length > 1) {
      div.remove();
    }

    info[0].value_2 = Sinp.value; //Este 0 deberia cambiar
    doTxt(info);
  });

  Tinp.addEventListener('change', (e) => {
    if (Tinp.value == '' && Sinp.value == '' && Finp.value == '' && document.querySelectorAll('.content').length > 1) {
      div.remove();
    }

    info[0].value_3 = Tinp.value; //Este 0 deberia cambiar
    doTxt(info);
  });

  div.append(Finp, Sinp, Tinp);
  document.body.append(div);
  //setChanges();
}

function checkVacuum() {
  let elm = document.querySelectorAll('.content');
  let n = elm.length - 1;

  if (elm[n].querySelectorAll('input')[0].value == '' && elm[n].querySelectorAll('input')[1].value == '' && elm[n].querySelectorAll('input')[2].value == '' && elm[n] != elm[0]) {
    return true;
  } else {
    return false;
  }
}

function doTxt(info) {
  if (!document.getElementById('txt-info')) {
    let txt = document.createElement('textarea');
    txt.setAttribute('id', 'txt-info');
    txt.style.position = 'absolute';
    txt.style.top = '0';
    txt.style.right = '0';
    txt.innerHTML = [];
    document.body.append(txt);
  } else {
    document.getElementById('txt-info').innerHTML = JSON.stringify(info);
  }
}

Como podréis ver, si escribimos cualquier cosa en los input del primer div, se genera tal y como yo quiero el array de la derecha. El problema viene en que si os fijáis, todos los eventos de dichos input van ligados al objeto [0] del array, por tanto, si el segundo div tiene que cambiar los valores del objeto[1] del array, se me cae la lógica.

Ahí está el fallo y lo que no se solucionar. Dicho [0] debería cambiar según qué div tuviera que mirar. ¿Cómo podría hacerlo correctamente?


[EDIT]

He probado esta solución, y realmente funciona, PERO, tiene como inconveniente que se generan demasiados eventos. Trato de quitarlos pero no hay tu tía:

function setChanges(){
    
    document.querySelectorAll('.content').forEach((item, index)=>{
        //item.querySelectorAll('input')[0].removeEventListener('keydown', null);

        item.querySelectorAll('input')[0].addEventListener('keydown', ()=>{
            info[index].value_1 = item.querySelectorAll('input')[0].value;
            doTxt(info);
        });

        // item.querySelectorAll('input')[1].removeEventListener('keydown');
        // item.querySelectorAll('input')[2].removeEventListener('keydown');
        
    });

}

Cada vez que se añade un div nuevo, pasa esa función al final. El problema es que genera demasiados eventos, ya que el removeEventListener() no funciona. Asumo que porque al principio no hay ninguno, y luego hay dos directamente cuando quiere volver a comprobarlo.

1
  • He hecho una pequeña demo, que no sé si es exactamente lo que buscas. Just chillin'. Creo que quizás pueda darte alguna idea.
    – VRoxa
    Commented el 15 jul. 2021 a las 11:19

2 respuestas 2

3

Aquí te dejo una posible alternativa que hace el manejo del array, las funciones de validación y eliminación de fila las completas porque no son complejas.

Sobre tu código he realizado algunas variantes:

  1. Separar la creación del div de los input.

  2. A cada input le voy agregar un id cuyo valor es el último indice que se abre. Por ejemplo: la fila 1 tendrá F0,S0,T0, la fila 2 F1,S2,T2, y así sucesivamente. Esto me va a servir para tener en el input el indice que le corresponde en el arreglo.

  3. Agrego un sólo listener al evento change del div, de este modo tendré un solo controlador de eventos en lugar de tener uno por input.

  4. En el controlador de evento, el event.target me indica el elemento donde se produjo el evento y con ello, saco el indice de id y las demás asignaciones.

Ya le agregas las funcionalidad de validación. Asimismo, se puede mejorar. Toma nota que la función checkVaccum debería recibir como parametro event.target. La verdad no he tocado esa función.


    let array = [];
    let info = [];

    if (array.length == 0) {
      createElements();
      doTxt();
    }



/*  Crea los INPUTS */

    function  createInputs() {
      let Finp = document.createElement('input');
      let Sinp = document.createElement('input');
      let Tinp = document.createElement('input');
      Finp.setAttribute('class', 'F-uno');
      Sinp.setAttribute('class', 'S-dos');
      Tinp.setAttribute('class', 'T-tres');
      document.querySelector("div.content").append(Finp, Sinp, Tinp);
      info.push({
        value_1: Finp.value,
        value_2: Sinp.value,
        value_3: Tinp.value
      });    
      Finp.setAttribute('id', 'F'+(info.length-1));
      Sinp.setAttribute('id', 'S'+(info.length-1));
      Tinp.setAttribute('id', 'T'+(info.length-1));
      doTxt(info);
    }


    function createElements() {

      let div = document.createElement('div');
      div.setAttribute('class', 'content');
      div.style.width = '700px';
      div.style.height = '70px';
      document.body.append(div);
      createInputs();
    }
    
   // Agrega el listener para los inputs changes 
    document.querySelector("div.content").addEventListener("change",function(e) {

        if (e.target && e.target.matches("input")) {
          let n=e.target.id.substr(1);

          if(e.target.matches("input.F-uno")){
            info[n].value_1 =e.target.value; 
            createInputs();
          }
          else if(e.target.matches("input.S-dos"))
            info[n].value_2 = e.target.value;
          else if(e.target.matches("input.T-tres")){
            info[n].value_3 = e.target.value;
            doTxt(info);
         }
        }
      });

    function checkVacuum() {
      let elm = document.querySelectorAll('.content');
      let n = elm.length - 1;
      if (elm[n].querySelectorAll('input')[0].value == '' && elm[n].querySelectorAll('input')[1].value == '' && elm[n].querySelectorAll('input')[2].value == '' && elm[n] != elm[0]) {
        return true;
      } else {
        return false;
      }
    }

    function doTxt(info) {
      if (!document.getElementById('txt-info')) {
        let txt = document.createElement('textarea');
        txt.setAttribute('id', 'txt-info');
        txt.style.position = 'absolute';
        txt.style.top = '0';
        txt.style.right = '0';
        txt.innerHTML = [];
        document.body.append(txt);
      } else {
        document.getElementById('txt-info').innerHTML = JSON.stringify(info);
      }
    }


2
  • Acabo de solucionarlo por mi cuenta, igualmente veré como funciona lo tuyo porque parece más limpio
    – AQMR
    Commented el 15 jul. 2021 a las 11:53
  • Acabo de comprobarlo, y cuando borras todos los valores de los input de un mismo div, no borra la información del objeto, del array ni el propio div de inputs. Pero contando con que eso no lko había preguntado te lo doy por válido, que me acabo de dar cuenta qiue eso no estaba en mi rpegunta XD
    – AQMR
    Commented el 15 jul. 2021 a las 11:55
1

Esto sería concretamente lo que estaba buscando:

let array = [];
let info = [];

if (array.length == 0) {
  createElements();
  doTxt();
}

function createElements() {

  let div = document.createElement('div');
  let Finp = document.createElement('input');
  let Sinp = document.createElement('input');
  let Tinp = document.createElement('input');
  let obj = {};

  div.setAttribute('class', 'content');
  div.style.backgroundColor = 'red';
  div.style.width = '500px';
  div.style.height = '50px';
  Finp.setAttribute('class', 'F-uno');
  Sinp.setAttribute('class', 'S-dos');
  Tinp.setAttribute('class', 'T-tres');

  Finp.addEventListener('change', (e) => {
    let chk = checkVacuum();

    if (Finp.value == '' && Sinp.value == '' && Tinp.value == '' && document.querySelectorAll('.content').length > 1) {
      doTxt(obj, Finp, 1);
    } else if (Finp.value != '' && chk != true) {
      createElements();
    }

    obj.value_1 = Finp.value;
    doTxt(obj, Finp);
  });

  Sinp.addEventListener('change', (e) => {
    if (Sinp.value == '' && Finp.value == '' && Tinp.value == '' && document.querySelectorAll('.content').length > 1) {
      doTxt(obj, Sinp, 1);
    } else {
      obj.value_2 = Sinp.value;
      doTxt(obj, Sinp);
    }
  });

  Tinp.addEventListener('change', (e) => {
    if (Tinp.value == '' && Sinp.value == '' && Finp.value == '' && document.querySelectorAll('.content').length > 1) {
      doTxt(obj, Tinp, 1);
    } else {
      obj.value_3 = Tinp.value;
      doTxt(obj, Tinp);
    }
  });

  div.append(Finp, Sinp, Tinp);
  document.body.append(div);
}

function checkVacuum() {
  let elm = document.querySelectorAll('.content');
  let n = elm.length - 1;

  if (elm[n].querySelectorAll('input')[0].value == '' && elm[n].querySelectorAll('input')[1].value == '' && elm[n].querySelectorAll('input')[2].value == '' && elm[n] != elm[0]) {
    return true;
  } else {
    return false;
  }
}

function doTxt(obj, elm, del) {

  if (!document.getElementById('txt-info')) {
    let txt = document.createElement('textarea');
    txt.setAttribute('id', 'txt-info');
    txt.style.position = 'absolute';
    txt.style.top = '0';
    txt.style.right = '0';
    txt.innerHTML = [];
    document.body.append(txt);
  } else {
    document.querySelectorAll('.content').forEach((item, index) => {

      if (item == elm.parentNode) {
        if (del) {
          info.splice(index, 1);
          elm.parentNode.remove();
        } else {
          info[index] = obj;
          console.log(info);
          document.getElementById('txt-info').innerHTML = JSON.stringify(info);
        }
      }
    });
  }
}

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.