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

Brak zmiany wyglądu przycisku

Hosting forpsi easy 1 pln
+1 głos
168 wizyt
pytanie zadane 16 maja 2021 w HTML i CSS przez bazyl8796 Obywatel (1,020 p.)

Cześć,
wie ktoś może czemu nie działa mi zmiana wyglądu przycisku pomimo "dobrego kodu"? Zakodowałem to tak samo jak w przypadku innych divów, a i tak mimo tego nie chce działać :/.
Z góry dziękuję za wszelką pomoc!

<div class="color-theme-container">
  <button class="button">e</button>
</div>
<div class="menu">
  <ol>
    <li> <a href="#">Strona Główna</a></li>
    <li> <a href="#">Wsparcie</a></li>
    <li> <a href="#">Kontakt</a></li>
    <li> <a href="#">Współpraca</a></li>
  </ol>
</div>
.color-theme-container button {
  cursor: pointer;
  color: rgb(60, 151, 55);
  border: none;
  width: 50px;
  height: 53px;
  font-weight: bold;
  background-color: rgb(66, 80, 156);
  transition: 0.75s;
}

.greenbutton {
  cursor: pointer;
  color: rgb(66, 80, 156);
  border: none;
  width: 50px;
  height: 70px;
  font-weight: bold;
  background-color: rgb(60, 151, 55);
  transition: 0.75s;
}

.menu {
  width: 625px;
  padding: 10px 0;
  background-color: rgb(66, 80, 156);
  border-left: 1px solid rgb(38, 46, 90);
  border-right: 1px solid rgb(38, 46, 90);
  border-bottom: 1px solid rgb(38, 46, 90);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.75s;
}

.greenmenu {
  border-right: 1px solid rgb(29, 68, 29);
  border-left: 1px solid rgb(29, 68, 29);
  border-bottom: 1px solid rgb(29, 68, 29);
  background-color: rgb(60, 151, 55);
  transition: all 0.75s;
}

.menu ol {
  padding: 0px;
  margin: 0;
  list-style-type: none;
  font-size: 15px;
  height: 20px;
  display: inline-block;
}

.menu ol a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 0px 20px;
}

.menu ol>li {
function changeDivsColor() {
  [...document.querySelectorAll('.menu')].forEach(div => {
    div.classList.toggle('greenmenu');
  });
  [...document.querySelectorAll('.color-theme-container', 'button')].forEach(div => {
    div.classList.toggle('.greenbutton');
  });
}
const button = document.querySelector('button');
button.addEventListener('click', changeDivsColor);

 

2 odpowiedzi

+2 głosów
odpowiedź 17 maja 2021 przez VBService Ekspert (246,010 p.)
edycja 17 maja 2021 przez VBService
 
Najlepsza

Jeżeli odwołujesz się do jednego elementu html (w Twoim przypadku <button>) wystarczy użyć document.querySelector

const button__color_change = document.querySelector('.color-theme-container button');
button__color_change.addEventListener('click', changeColor);

function changeColor() {
  [...document.querySelectorAll('.menu')].forEach(item => {
    item.classList.toggle('greenmenu');
  });
  
  button__color_change.classList.toggle('greenbutton');
}

a w css-ie, ten kawałek

.color-theme-container button {
  cursor: pointer;
  color: rgb(60, 151, 55);
  border: none;
  width: 50px;
  height: 53px;
  font-weight: bold;
  background-color: rgb(66, 80, 156);
  transition: 0.75s;
}
 
.greenbutton {
  cursor: pointer;
  color: rgb(66, 80, 156);
  border: none;
  width: 50px;
  height: 70px;
  font-weight: bold;
  background-color: rgb(60, 151, 55);
  transition: 0.75s;
}

na 

.button {
  cursor: pointer;
  color: rgb(60, 151, 55);
  border: none;
  width: 50px;
  height: 53px;
  font-weight: bold;
  background-color: rgb(66, 80, 156);
  transition: 0.75s;
}
 
.greenbutton {
  color: rgb(66, 80, 156);
  height: 70px;
  background-color: rgb(60, 151, 55);
  transition: 0.75s;
}

 

1
komentarz 17 maja 2021 przez bazyl8796 Obywatel (1,020 p.)
Działa, dzięki :o!
+1 głos
odpowiedź 16 maja 2021 przez pablop76 VIP (122,640 p.)

Kod nie jest dobry jeżeli nie działa :)

1. kropka jest zbędna w nazwie klasy

div.classList.toggle('.greenbutton');

2. Problem ze specyficznością 

Podobne pytania

0 głosów
1 odpowiedź 97 wizyt
pytanie zadane 9 października 2020 w JavaScript przez napoludniestad.pl Użytkownik (960 p.)
0 głosów
1 odpowiedź 387 wizyt

92,092 zapytań

140,751 odpowiedzi

317,718 komentarzy

61,409 pasjonatów

Advent of Code 2023

Top 15 użytkowników

  1. 0p. - adrian17
  2. 0p. - wizarddos
  3. 0p. - Dewidos
  4. 0p. - Marcin Jasiński
  5. 0p. - Mateusz Sobala
  6. 0p. - Mateusz
  7. 0p. - NOONE
  8. 0p. - Adam Śpiewak
  9. 0p. - WhiskeyTaster
  10. 0p. - Rafał Budzis
  11. 0p. - Krzysztof Zawadka
  12. 0p. - tokox
  13. 0p. - TheLukaszNs
  14. 0p. - mjavor
  15. 0p. - Jakub Stępień
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat aż -50% (jeszcze tylko dziś 30.11 z okazji Black Week, a potem będzie to 30%) na bilety w wersji "Standard"! Więcej informacji na temat akademii znajdziecie tutaj. Dziękujemy Sekurakowi za tak fajną zniżkę dla Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 15% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...