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

Brak zmiany wyglądu przycisku

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
+1 głos
260 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 (256,600 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 (123,540 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ź 147 wizyt
pytanie zadane 9 października 2020 w JavaScript przez napoludniestad.pl Użytkownik (960 p.)
0 głosów
1 odpowiedź 813 wizyt

93,443 zapytań

142,434 odpowiedzi

322,691 komentarzy

62,805 pasjonatów

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

...