Zmiana wartości diva JS

Question

Witam,

Czy mogę zmienić zawartość diva nie używając metody GetElementById? Może inny ma ktoś pomysł, bo mam program, gdzie algorytm robi mi divy o tym samym id, a chcę zrobić przycisk, po naciśnięciu którego zawartość diva, w którym był naciśnięty się zmieniła, a nie wszystkich.

Answer 1

Zacząłbym od próby zmiany tego algorytmu. Id to unikalny identyfikator i jak sama nazwa wskazuje, nie powinien się powtarzać.

Ale, odpowiadając na pytanie - tak, możesz znaleźć referencję do tego diva innymi sposobami. Na przykład korzystając z querySelector + nth-child

Comments

Mam class z przyzwyczajenia napisałem id. Czy ta metoda działa też na klasy?

---

Być może w ogóle źle podchodzić do tematu. Po kliknięciu w przycisk masz bardzo łatwy dostęp do referencji tego przycisku (poprzez event.currentTarget). Wtedy wystarczy tylko pobrać parentElement?

---

Nie wiem co pan pisze, ale mi chodzi o zmianę tylko diva, w którym jest przycisk nie patrząc na id

---

Jasne. Pokaż jakiś kawałek kodu

---

Tu ten "algorytm" jest (PHP)

<?php 
			if(isset($_SESSION['wyszukane']))
			{
				if($wynik = $mysqli->query($query)) 
				{
					while($row = $wynik->fetch_assoc()) 
					echo '<div class="produktwyszukany">'.
					"<div class='zdjecie'>"."<img src='".$row['zdjecie']."'/>"."</div>".
					"<div class='nazwa'>".$row['nazwa']."</div>"."<br />"."<br />".
					"<div class='cena'>".$row['cena'].
					"<div class='zl'>zł</div>"."</div>".
					"<center>"."<a name='zobacz' onClick=''>ZOBACZ</a>"."</center>".
					"</div>";				
					;
				}
			}
				?>

 

---

<ul>
  <li>
    <button onclick="this.parentElement.innerText = 'tekst 1'">Przycisk 1</button>
  </li>
  <li>
    <button onclick="this.parentElement.innerText = 'tekst 2'">Przycisk 2</button>
  </li>
</ul>

Kod powyżej jest niezgody z dobrymi praktykami i docelowo nie powinieneś go używać. Na tym etapie jednak dość dobrze on obrazuje, o co chodzi.

---

(Jeśli chcesz to zrobić poprawnie, skorzystaj z event delegation)

---

Jak wkleję tego buttona to struktura strony mi się psuje da się jakoś temu zaradzić?

---

To tylko przykład, jak zmienić zawartość rodzica. Spórbuj napisać kod na jego podstawie

---

Ok, spróbuję.

---

Czy coś takiego ma prawo działać, jak nie to co do zmiany?

"<button onclick='this.parentElement.innerHTML = '".$row['opis']."'>ZOBACZ</button>"

 

---

Sprawdź, czy działa

---

Sprawdziłem i nie. Co mogę zmienić?

---

Konsola wyświetla jakieś błędy? czym się objawia "nie działa"?

---

Taki błąd pokazuje:

SyntaxError: expected expression, got '}'