Wywoływanie onclicka dla elementów z tą samą klasą

Witam serdecznie, ostatnimi czasy bawię się w javascripta i natknąłem na pewne błędy. Dzisiaj miałem do zrobienia dwie rzeczy, mianowicie po zaznaczeniu inputa radio, background nadrzędnego elementu zmienia tło. Dodatkowo kodowałem dodawanie/odejmowanie wartości inputa po kliknięciu w przycisk.

Tak czy inaczej, na przykładowym jednym elemencie to działa, jeżeli ma przypisane ID w HTML, jednak jeżeli dodaję ich więcej - kod przestaje działać, bądź działa tylko dla jednego elementu, resztę pomija. Próbowałem z klasami i metodą document.getElementsByClassName, aczkolwiek nie mogę wywołać na nich onclicka, dodatkowo nie za bardzo wiem jak je zidentyfikować, by event odbywał się dla odpowiedniego elementu.

Pierwszy kod - https://jsfiddle.net/zhvry8bb/

Założenie tego jest takie, iż tych tabelek będzie z 5-6, w każdej input i jakiś randomowy tekst. Jeżeli input radio przy nim jest zaznaczony, nadrzędny tr w tabeli zmienia style = background.

Drugi kod

<input type="text" onkeypress="walidacja()" id="test" maxlength="3" placeholder="0">
<button id="add_button" onclick="dodaj(this)">Dodaj</button>
<button id="delete_button" onclick="usun(this)">Odejmij</button>

<script type="text/javascript">

wartosc = document.getElementById("test");
product = document.getElementById("product_1");
dilejt = document.getElementById("del_offer");

function dodaj() {
if (wartosc.value < 999) {
wartosc.value++;
}
}

function usun() {
if (wartosc.value < 1) {
wartosc.value - wartosc.value++;
}
wartosc.value--;
}

function walidacja() {
if (event.keyCode < 48 || event.keyCode > 57){
event.returnValue = false;
}
}

dilejt.onclick = function() {
product.style = "display: none";
}

</script>

Tutaj również chodzi mi o możliwość dodania kilku takich pól.

Z góry dzięki za odpowiedź, pomóżcie. Przeorałem dzisiaj sporą ilość stron i nic nie zdziałałem w tym temacie. Wiem, że pokazane kody są straasznie nubskie, ale dopiero rozpoczynam swoją przygodę.

var radios = document.getElementsByClassName("regular-radio");

for (var radio in radios) {
    radios[radio].onclick = function() {
        for (var radio in radios) {
            if (radios[radio].checked) {
                radios[radio].parentElement.parentElement.style = "background: #eaeaea";
            } else {
                radios[radio].parentElement.parentElement.style = "background: #none";
            }
        }
    }
}

poczytaj też o this

object.onclick = function() {
    this.foo = bar;
}

stivens napisał(a):

var radios = document.getElementsByClassName("regular-radio");

for (var radio in radios) {
    radios[radio].onclick = function() {
        for (var radio in radios) {
            if (radios[radio].checked) {
                radios[radio].parentElement.parentElement.style = "background: #eaeaea";
            } else {
                radios[radio].parentElement.parentElement.style = "background: #none";
            }
        }
    }
}

poczytaj też o this

object.onclick = function() {
    this.foo = bar;
}

Dzięki pięknie, skrypt który podałeś działa wyśmienicie i tak muszę go delikatnie zmodyfikować pod siebie. Dzięki temu się nauczę. Tak czy inaczej, drugi skrypt postanowiłem napisać od nowa, nie używając this (nie wiem dlaczego, ale jest to dla mnie na tę chwilę czarna magia), ale przy użyciu pętli.

Tak czy inaczej kod wygląda w ten sposób:

<input type="text" class="inputs" value="0">
<button class="add">Dodaj</button>
<button class="del">Usuń</button>

<input type="text" class="inputs" value="0">
<button class="add">Dodaj</button>
<button class="del">Usuń</button>

<script>

var ilosc = document.getElementsByClassName("inputs");
var dodaj = document.getElementsByClassName("add");
var usun = document.getElementsByClassName("del");

for(z = 0; z < ilosc.length; z++) {

for (i = 0; i <= dodaj.length; i++) {
dodaj[i].onclick = function () {
ilosc[z].value++;
}

for (u = 0; u < usun.length; u++) {
usun[u].onclick = function () {
ilosc[z].value--;
}
}

}
}


</script>

I teraz, teoretycznie przyciski są już identyfikowane jako pojedyńcze zdarzenie, aczkolwiek inputy już nie koniecznie. Klikając w przycisk jeden bądź drugi, dodaje wartości tylko do pierwszego. Zamiast przy pierwszym do pierwszego, przy drugim do drugiego. Jakieś sugestie? Co w tym kodzie jest złe, co mogę zmienić. Tylko nie piszcie, że wszystko, bo tego jestem świadomy :D

eeee masz przecież input type="number", który to robi

ale w celach edukacyjny, po pierwsze źle do tego podchodzisz - musisz jakiś porządek wprowadzić

<div class="input-wrapper">
  <input type="text" value="0">
  <button class="add">Dodaj</button>
  <button class="subtract">Usuń</button>
</div>

<div class="input-wrapper">
  <input type="text" value="0">
  <button class="add">Dodaj</button>
  <button class="subtract">Usuń</button>
</div>

var add = document.getElementsByClassName('add');
var subtract = document.getElementsByClassName('subtract');

for (var i=0; i<add.length; i++) {
  add[i].addEventListener('click', function(){
  	this.parentElement.getElementsByTagName('input')[0].value++;
  });
  
  subtract[i].addEventListener('click', function(){
  	this.parentElement.getElementsByTagName('input')[0].value--;
  });
}

No i nie używaj magicznych zmiennych żywcem wyjętych z abecadła, kod jest dla ludzi nie dla maszyn (no chyba, że i to wiadomo, że iterator - ale jak zaczynasz dodawać jakieś z u, a b c d e f g h i j k to tylko wtf zostaje powiedzieć)