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