Pomoc pri pravljenju online prodavnice

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Pozdrav!

Imam vise istih ARTICLE sekcija sa istim elementima. To ovako izgleda:

<article>       <img src="images/artikal.jpg" alt="" id="slika">       <select name="" id="">         <option value="1">1</option>         <option value="2">2</option>         <option value="3">3</option>       </select>       <p>aaaaaa</p>       <button id="uKorpu">Dodaj u korpu</button>     </article>     <article>       <img src="images/artikal.jpg" alt="" id="slika">       <select name="" id="">         <option value="1">1</option>         <option value="2">2</option>         <option value="3">3</option>       </select>       <p>bbbbbb</p>       <button id="uKorpu">Dodaj u korpu</button>     </article>

Zelim da kada klknem na dugme u drugom artiklu da se pozadina tog artikla promeni. Kako to da uradim? Probao sam ovako:

var uKorpu = document.querySelector('#uKorpu'); uKorpu.addEventListener('click', function() {    var izabraniArtikal = this.parentElement.nodeName;    document.querySelector(izabraniArtikal).style.backgroundColor = 'green'; });

Uspem da promenim samo u prvom, kada kliknem na dugme u drugom nista se ne desava. Kontam da se to desava, jer kada sam definisao promenljivu uKorpu dodelio sam joj ElementID samo prvog dugmeta jel tako? Ne znam kako da to ispravim da radi.
Ako moze pomoc.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Samo setuj style parent elementu.
this.parentNode.style.backgroundColor = 'green';

• 1Ovo se svidja korisniku: Filodendron
  
  Registruj se da bi pohvalio/la poruku!

Jok. ID mora da bude jedinstven, a ti imas (minimum) dva elementa sa istim ID-em.

Daj im neku klasu i setuj listener preko nje, a ne ID-a.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Ne radi ni kada zamenim ID sa klasama.

• 1Ovo se svidja korisniku: Filodendron
  
  Registruj se da bi pohvalio/la poruku!

Ne radi zato sto .querySelector() vraca samo prvi element koji uhvati. Ako hoces da ih uhvatis sve, moras da koristis .querySelectorAll().

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

var uKorpu = document.querySelectorAll('. uKorpu'); uKorpu.addEventListener('click', function() {    var izabraniArtikal = this.parentElement.nodeName;    document.querySelector(izabraniArtikal).style.backgroundColor = 'green'; });

Sad mislim da ne radi, jer u eventu izaberem samo prvi element preko querySelector. Kako da to ispravim, da uzme samo parent element?

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Kao sto sam vec reko. this.parentElement ti je artical, njemu setuj koj god stil hoces. Nije ti potreban querySelector.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

A ukoliko zelim da pristupim selektovanoj vrednosti select elementa? Kako to da uradim?

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

selectElement.value

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

<article>       <img src="images/artikal.jpg" alt="" id="slika">       <select name="" id="">         <option value="1">1</option>         <option value="2">2</option>         <option value="3">3</option>       </select>       <p>aaaaaaLorem, ipsum dolor sit amet consectetur adipisicing elit. Autem blanditiis repudiandae quidem veniam aspernatur ullam, pariatur vel deserunt, in modi veritatis, est dolorem! Eum eius, dicta tempore odit voluptatum in doloremque nihil magnam iusto facilis officia omnis illum eligendi eveniet animi, aut earum sint exercitationem voluptate adipisci odio unde deleniti.</p>       <button class="uKorpu">Dodaj u korpu</button>     </article>     <article>       <img src="images/artikal.jpg" alt="" id="slika">       <select name="" id="">         <option value="1">1</option>         <option value="2">2</option>         <option value="3">3</option>       </select>       <p>bbbbbbLorem, ipsum dolor sit amet consectetur adipisicing elit. Autem blanditiis repudiandae quidem veniam aspernatur ullam, pariatur vel deserunt, in modi veritatis, est dolorem! Eum eius, dicta tempore odit voluptatum in doloremque nihil magnam iusto facilis officia omnis illum eligendi eveniet animi, aut earum sint exercitationem voluptate adipisci odio unde deleniti.</p>       <button class="uKorpu">Dodaj u korpu</button>     </article>

Ja sam ga ovako resio:

var uKorpu = document.querySelectorAll('.uKorpu'); uKorpu.forEach(function(button, i) {   uKorpu[i].addEventListener('click', function() {     var selectValues = button.parentElement.querySelector('select').value;     console.log(selectValues);   }); });