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.