Small typo on the onclick function. It’s onclick not onClick
let menuBtn = document.querySelector(".Btn");
let testing = document.querySelector(".test");
menuBtn.onclick = ()=>{
testing.classList.add("hide");
}.test {
display: block;
}
.hide {
display: none;
}
.Btn {
width: 30px;
height: 30px;
background-color: teal;
}<nav class="test">
<ul>
<li>test</li>
</ul>
</nav>
<div class="Btn">test</div>the problem here is you asked it to add a class of hide using javascript, but in your css you defined .test.hide
/*should be*/
.hide{
display:none;
}
/*not*/
.test.hide{
display:none;
}
It seems my code doesnt work. Yet i have used this code before and i have it working in another project. Ive been staring myself blind at it. I cant find the problem.
Can i not apply the onClick function like this with the display: function or what..
Or is there a better way of doing this.
It is ment for a button opening my menu.
let menuBtn = document.querySelector(".Btn");
let testing = document.querySelector(".test");
menuBtn.onClick = ()=>{
testing.classList.add("hide");
}.test {
display: block;
}
.test.hide {
display: none;
}
.Btn {
width: 30px;
height: 30px;
background-color: teal;
}<nav class="test">
<ul>
<li>test</li>
</ul>
</nav>
<div class="Btn">test</div>it is onclick not onClick
Thank you. Its time to sleep i guess.