0

Desde un array vacío se crea un div con tres input.

let array = [];

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

function createElements() {
  let div = document.createElement('div');
  div.setAttribute('class', 'content');
  div.style.backgroundColor = 'red';
  div.style.width = '500px';
  div.style.height = '50px';
  document.body.append(div);

  let Finp = document.createElement('input');
  Finp.setAttribute('class', 'F-uno');
  let Sinp = document.createElement('input');
  Sinp.setAttribute('class', 'S-dos');
  let Tinp = document.createElement('input');
  Tinp.setAttribute('class', 'T-tres');

  div.append(Finp, Sinp, Tinp);

  Finp.addEventListener('change', (e) => {
    if (Finp.value == '' && Sinp.value == '' && Tinp.value == '' && document.querySelectorAll('.content').length > 1) {
      div.remove();
    } else if (Finp.value != '' /*&& checkVacuum == 'true'*/ ) {
      createElements();
    }
  });

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

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

El caso es que, necesito hacer lo siguiente (mal reflejado en los eventos de los input):

  • Si el valor del primer input de un div, es cambiado (event change), tiene que crear otro div con tres input abajo del todo. (Yo lo hago activando la función createElements())
  • Si el ultimo div de todos, tiene los valores input vacíos, no se pueden crear más divs debajo.
  • Si borras el valor de los 3 input de un div, dicho div se borrará del DOM (eso está hecho)

Con estas tres premisas, consigo hacer la primera y la última, pero la segunda me trae un problema de lógica severo para lo que es mi cabecita pensante.

Intenté solventarlo con la función checkVacuum():

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 == ''){
        return true;
    }
}

Pero hace que, como el primer div de todos tiene los 3 input vacíos, y al ser el primero es el ultimo ya que es el único, y no se añaden más input.

¿Cómo podría hacerlo? No se me ocurre nada. Lo peor es que sabría hacerlo sintácticamente pero no morfológicamente

1 respuesta 1

1

Vale, ya lo tengo, solo bastaba con comprobar también en checkVacuum si el ultimo div era el primero y listo:

let array = [];

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

function createElements() {
  let div = document.createElement('div');
  div.setAttribute('class', 'content');
  div.style.backgroundColor = 'red';
  div.style.width = '500px';
  div.style.height = '50px';
  document.body.append(div);

  let Finp = document.createElement('input');
  Finp.setAttribute('class', 'F-uno');
  let Sinp = document.createElement('input');
  Sinp.setAttribute('class', 'S-dos');
  let Tinp = document.createElement('input');
  Tinp.setAttribute('class', 'T-tres');

  div.append(Finp, Sinp, Tinp);

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

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

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

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

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;
  }
}

2
  • Puedes marcarlo como respuesta
    – Mateo
    Commented el 15 jul. 2021 a las 14:53
  • Hasta dentro de dos dias no me deja
    – AQMR
    Commented el 15 jul. 2021 a las 21:06

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.