Brak zmiany wyglądu przycisku

Question

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);

 

Answer 1

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;
}

 

Comments

Działa, dzięki :o!

Answer 2

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ą