Problem z opisaniem zachowania buttonów ankiety

Problem z opisaniem zachowania buttonów ankiety
K1
  • Rejestracja:ponad 6 lat
  • Ostatnio:ponad 6 lat
  • Postów:2
0

Cześć :) Na wstępie zaznaczę że przygodę z JS dopiero zaczynam ;) z dostałam do wykonania zadanie które jestem w stanie logicznie ogarnąć ale nie wiem jak je zapisać- może pomożecie?
Mam ankietę z 3 pytaniami dla której robię front. Chciałabym żeby po kliknięciu buttonu (img) jego opacity zmieniła się z 0.5 na 1 i tyle ;) Bez możliwości zmiany później opcji itd... Kod html wygląda tak (wklejam kawałek):

Kopiuj
 <div class="oceny">
<button type="radio" name="button" class="btn" value="0" id="button"><img src="1.png" class="button"/></button>
<button type="radio" name="button" class="btn" value="1" id="button"><img src="2.png" class="button"/></button>
 <button type="radio" name="button" class="btn" value="2" id="button" ><img src="3.png" class="button"/></button>
 </div>

napisałam coś takiego jak niżej (i milion innych opcji), ale oczywiście nie działa ;)

Kopiuj

Document.querySelector('.btn').addEventListener('change', (event) => event.currentTarget.querySelectorAll('radio').forEach((element) => { element.disabled = True})).

Ma ktoś z Was pomysł jak to mogę rozwiązać? Sprawa jest banalna, brakuje jedynie wiedzy ;) W CSS to nie działa bo :focus działa dla jednego elementu na stronie, a chodzi mi o takie działanie (tylko żeby po zaznaczeniu elementu potem już nie dało się zaznaczyć nic innego).

edytowany 2x, ostatnio: klaudia19_19
YO
  • Rejestracja:ponad 11 lat
  • Ostatnio:prawie 3 lata
  • Postów:540
1

A nie lepiej dać, że jak wybrano radioButtona to zmieniasz go na disable ... ?
coś takiego:

Kopiuj
input[type=radio]").attr('disabled', true);

Dziura w ścianie gdzie Panowie widzą Panie,
Rick and Morty, season 1.
Szukam tej dziury, jak coś dajcie znać gdzie jest :D "A z Ciebie c**** pisowski" - Ula Papuszko (w sensie, że JA) 05.06.2020 r., grupa: Strajk Przedsiębiorców. Witam zatem, jestem c**** pisowski ;)
edytowany 1x, ostatnio: youmound
Freja Draco
Freja Draco
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
0

id="button"' - ID-y elementów nie powinny się powtarzać,
addEventListener('change' - raczej 'click', bo nie zmieniasz przecież wartości buttona,
element.disabled = True -
Jak chcesz zmieniać opacity, to zmieniaj też opacity: element.style.opacity = "0.5"
chyba, że sobie wcześniej zdefiniujesz w CSS
button:disabled {opacity:0.5;}


K1
  • Rejestracja:ponad 6 lat
  • Ostatnio:ponad 6 lat
  • Postów:2
0
Kopiuj
Document.querySelector('.btn').addEventListener('click', (event) => event.currentTarget.querySelectorAll('radio').forEach((element) => { element.style.opacity = "1"}));

ten kawałek powinien być ok? nic nie reaguje... :(
opacity się nie zmienia (w css jest 0.5)

Freja Draco
Freja Draco
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
0
Kopiuj
button[disabled] {
  color:green;
  opacity:0.5;
}
button[disabled]::-moz-focus-inner {
  border:none;
  outline:none;
}
Kopiuj
<div class="oceny">
  <button name="oceny" class="btn">1</button>
  <button name="oceny" class="btn">2</button>
  <button name="oceny" class="btn">3</button>
</div>

<div class="cos">
  <button name="cos" class="btn">1</button>
  <button name="cos" class="btn">2</button>
  <button name="cos" class="btn">3</button>
</div>
Kopiuj
document.querySelectorAll('.btn').forEach((button) => {
  button.addEventListener('click', (event) => {
    document.querySelectorAll('button[name='+event.currentTarget.name+']').forEach((element) => {
      element.disabled = true;
    })
  });
});

Ale forEach nie we wszystkich przeglądarkach działa na kolekcjach elementów, bo wychodzi, że kolekcja to coś trochę innego niż tablica:
https://medium.com/@jsdevray/5-ways-to-loop-over-dom-elements-from-queryselectorall-in-javascript-55bd66ca4128


edytowany 2x, ostatnio: Freja Draco

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.