Problem z addeventlistener, inputem i powiązaniem

Question

Witam, ciężko będzie mi wytłumaczyć mój problem, ale mam nadzieję, że ktoś mnie zrozumie. Mam taki układ: 

var el = document.querySelectorAll('.propozycje'); // Tabele 
var input = document.querySelectorAll('.info'); // inputy, które znajdują się w środku tych tabel

 

Tabele maja różne data-nazwa, które posiadają różne wartości. Oczywiście mógłbym to zrobić na divach, ale akurat w tym przypadku bardziej pasowały mi tabele. Zrobiłem możliwość zaznaczania i odznaczania tych tabeli:

for (var i=0; i<el.length; i++){
          el[i].addEventListener('click', function(e) {
            var val = parseInt(this.dataset.val);

            if(val === 0){
              this.classList.add('propozycje-selected');
            }else{
             this.classList.add('propozycje-unselected');}
         });
} 

Dodatkowo pushuję sobie dane z data-nazwa do tablicy obiektów. 

 

Wszystko dobrze działało dopóki nie dodałem inputów, które mogą być wypełnione lub nie. Do tej samej pętli dodałem nowy listener i skorzystałem z zdarzenia blur. 

input[i].addEventListener("blur", function(){

});

i przyznam, że się w tym wszystkim pogubiłem. Mam parę problemów: 1. Jeśli kliknę na jeden input, a potem od razu na drugi, to jednocześnie robi mi się nieskończona pętla 2. Jeśli kliknę najpierw na tabelę, a dopiero potem bedę chciał wpisać wartość, to obiekt będzie z wartością inputa NULL, ponieważ wartość została dopiero wpisana potem. Ewentualnie mógłbym jakoś edytować ostatni obiekt z tablicy?  Może mógłbym jakoś zrobić jedno zdarzenie związane z tymi dwoma elementami? 4. Jeśli zaznaczę tabelę, a dopiero potem klikne na input żeby coś zaznaczyć, to zadziała mi na nowo zdarzenie z tabeli, więc input będzie aktywny, ale tabela się odznaczy. 

Comments

"Ale nazwy zmiennych to po angielsku" :D

---

Haha. :D Część jest, ale nie zmieniłem wszędzie. :D