• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

click_on_button_problem, klasy w js

0 głosów
40 wizyt
pytanie zadane 9 lutego w HTML i CSS przez program naczelny Bywalec (2,170 p.)
<!DOCTYPE html>
<html lang="pl">
<head>
 <meta charset="utf-8">

 
 <script>
 
function Function() {
 x.getElementsByClassName('link');
 
  if (x.style.opacity === "0") {
    x.style.opacity = "1";
  } else {
    x.style.opacity = "0";
  }
 
}
 </script>

 </head>
 
<body>

<div id="button" style="background-color: red; width: 50px; height: 50px;" onclick="Function()"></div>

<div class="link">2</div>
<div class="link">3</div>

</body>
</html>

Witam! 

Powyższy kod nie działa jak należy, po kliknięciu na red button cyfry poniżej nie znikają. Moim problemem jest tutaj js, w przypadku kiedy robię id, wszystko działa, natomiast z class getElementsByClassName() jest problem. Wyjaśni ktoś błąd który uniemożliwia tutaj ustawienia opacity na 0 tudzież else na 1?

1 odpowiedź

+2 głosów
odpowiedź 9 lutego przez Marchiew Mądrala (6,300 p.)
wybrane 9 lutego przez program naczelny
 
Najlepsza

x.getElementsByClassName('link');

Źle użyłeś tej metody. Powinieneś napisać 

var x = document.getElementsByClassName('link');

Metoda getElementsByClassName nalęzy do obiektu "document" i zwraca "HTMLCollection", który jest niby tablicą, ale niestety nie.

Poniżej napisałem jeden ze sposobów. Jeśli czegoś nie rozumiesz to pytaj:

function Function() {
  var x = [ ...document.getElementsByClassName('link') ];
  
  x.forEach(function(element) {
    if (element.style.opacity === "0") {
      element.style.opacity = "1";
    } else {
      element.style.opacity = "0";
    }
  })
};

 

komentarz 9 lutego przez program naczelny Bywalec (2,170 p.)
function Function() {
  var x = document.getElementsByClassName('link');
  
    if (x.style.opacity === "0") {
      x.style.opacity = "1";
    } else {
      x.style.opacity = "0";
    }
  }

 

Dzięki wielkie za gotowca, natomiast mam jeszcze kilka pytań.

Czemu taka funkcja nie jest w stanie zadziałać? oraz czym jest [ ... ] ta tablica z kropkami i co ona oznacza?

komentarz 9 lutego przez Marchiew Mądrala (6,300 p.)

document.getElementsByClassName('link');

Zwraca HTMLCollection, który przypomina tablicę, ale nią nie jest, dlatego trzeba przerobić go na zwykłą tablicę. jest na to parę sposobów:

https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Spread_operator

https://stackoverflow.com/questions/222841/most-efficient-way-to-convert-an-htmlcollection-to-an-array

Po otrzymaniu tablicy musisz po niej iterować by chwycić pojedynczy element, na którym dopiero możesz zmieniać właściwość "opacity".

PS.

Jeszcze prościej i krócej byłoby przełączanie klasy z css:

.hide {
  opacity: 0;
}
function Function() {
  var x = [...document.getElementsByClassName('link')];
  x.forEach(e => e.classList.toggle("hide"));
};

Polecam również przeniesienie bloku javascript bezpośrednio przed końcem "body". Będziesz miał pewność, że cała struktura strony się załadowała i unikniesz niespodzianek pod postacią nieznanej klasy, id, lub tagu

Podobne pytania

0 głosów
1 odpowiedź 78 wizyt
pytanie zadane 30 listopada 2017 w HTML i CSS przez Osheo Początkujący (260 p.)
0 głosów
1 odpowiedź 109 wizyt
pytanie zadane 10 października 2018 w JavaScript, jQuery, AJAX przez Whatisit Początkujący (390 p.)
0 głosów
2 odpowiedzi 62 wizyt
pytanie zadane 21 czerwca 2018 w JavaScript, jQuery, AJAX przez MrxCI Mądrala (5,960 p.)
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

60,245 zapytań

105,929 odpowiedzi

220,065 komentarzy

32,445 pasjonatów

Przeglądających: 182
Pasjonatów: 2 Gości: 180

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...