Pomoc pri pravljenju online prodavnice

1

Pomoc pri pravljenju online prodavnice

offline
  • Milos Stojanovic
  • Programer u pokusaju
  • Pridružio: 31 Dec 2015
  • Poruke: 847
  • Gde živiš: Srbija / Zajecar

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.



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
offline
  • Pridružio: 15 Avg 2009
  • Poruke: 654
  • Gde živiš: Cuprija

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



offline
  • PHP developer
  • Pridružio: 22 Mar 2006
  • Poruke: 3556
  • Gde živiš: 127.0.0.1

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.

offline
  • Milos Stojanovic
  • Programer u pokusaju
  • Pridružio: 31 Dec 2015
  • Poruke: 847
  • Gde živiš: Srbija / Zajecar

Ne radi ni kada zamenim ID sa klasama.

offline
  • PHP developer
  • Pridružio: 22 Mar 2006
  • Poruke: 3556
  • Gde živiš: 127.0.0.1

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

offline
  • Milos Stojanovic
  • Programer u pokusaju
  • Pridružio: 31 Dec 2015
  • Poruke: 847
  • Gde živiš: Srbija / Zajecar

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?

offline
  • Pridružio: 15 Avg 2009
  • Poruke: 654
  • Gde živiš: Cuprija

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

offline
  • Milos Stojanovic
  • Programer u pokusaju
  • Pridružio: 31 Dec 2015
  • Poruke: 847
  • Gde živiš: Srbija / Zajecar

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

offline
  • Pridružio: 15 Avg 2009
  • Poruke: 654
  • Gde živiš: Cuprija

selectElement.value

offline
  • Milos Stojanovic
  • Programer u pokusaju
  • Pridružio: 31 Dec 2015
  • Poruke: 847
  • Gde živiš: Srbija / Zajecar

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

Ko je trenutno na forumu
 

Ukupno su 662 korisnika na forumu :: 11 registrovanih, 1 sakriven i 650 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3028 - dana 22 Nov 2019 07:47

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: bojan313, bulovic, comi_pfc, Djokislav, MikeHammer, Miskohd, robertino, sokars, Uciteljgoran, vathra, XBMC