Hey there! I'm currently delving into the world of pure JavaScript and could really use some guidance on a particular issue.
Here's what I'm aiming to accomplish:
I'd like to design a checkbox that triggers the opening of a window when clicked. Inside this window, there will be several radio buttons. If a user selects one of these radio buttons, the checkbox outside the window should automatically uncheck, causing the window to close.
Challenges Faced:
The reversal function in the code isn't functioning correctly.
The linkage between checking a radio button and unchecking the checkbox seems to be broken.
Code Snippet:
let box = document.querySelector('.dd_box')
let ddCb = document.querySelector('#dd_cb')
let ddRb = document.querySelector('.dd_rb')
// Normal operation
ddCb.addEventListener('change', () => {
box.classList.add('active')
})
// Reverse functionality
ddRb.addEventListener('click', () => {
box.style.opacity = 0; // Avoid displaying the initial style when toggling the 'active' class
box.classList.add('in-active');
box.classList.remove('active');
// Forcing DOM update
setTimeout(() => {
box.classList.add('active');
box.style.opacity = '';
}, 5);
box.addEventListener('animationend', onAnimationEnd);
})
function onAnimationEnd() {
box.classList.remove('active', 'in-active');
box.removeEventListener('animationend', onAnimationEnd);
}body {
background-color: rgba(30, 30, 30);
}
#dropdown {
width: 500px;
height: 300px;
top: 50px;
left: 100px;
position: absolute;
}
#dropdown input[type=checkbox] {
display: none;
}
.dd_bttn
/* Clickable button */
{
width: 25px;
height: 25px;
top: 0px;
left: -25px;
position: absolute;
z-index: 10;
background-color: darkorange;
cursor: pointer;
}
.dd_bttn:hover {
background-color: purple;
}
.dd_box {
width: 100%;
height: 100%;
top: 0px;
left: 50%;
position: absolute;
transform: scale(0);
background: grey;
}
@keyframes zzzib {
0% {
transform: translate(-50%) scale(0);
background-color: red;
}
20% {
transform: translateX(-50%) scale(0.9);
}
100% {
transform: translateX(-50%) scale(1);
}
}
.dd_box.active {
animation: zzzib 1s forwards;
animation-timing-function: ease-in-out;
}
.dd_box.in-active {
animation-direction: reverse;
animation-timing-function: ease-in-out;
}<div id="dropdown">
<input type="checkbox" id="dd_cb">
<label id="dd_label" for="dd_cb">
<div class="dd_bttn"></div>
</label>
<div class="dd_box">
<input type="radio" class="dd_rb" name="rb">
<input type="radio" class="dd_rb" name="rb">
<input type="radio" class="dd_rb" name="rb">
</div>
</div>