I'm learning pure javascript and need your help with a problem!
What I'm trying to achieve:
I want to create a checkbox. When the user clicks the checkbox I want a window to open. In the newly opened window will be multiple radio buttons. If the user clicks on one of those radio buttons, the checkbox outside of the window will uncheck and the box disappear with
Problems:
In the code the reverse don't work.
The connection between radio = check to checkbox = uncheck does not work.
let box = document.querySelector('.dd_box') let ddCb = document.querySelector('#dd_cb') let ddRb = document.querySelector('.dd_rb') // play normal ddCb.addEventListener('change', () => { box.classList.add('active') }) // play in reverses ddRb.addEventListener('click', () => { box.style.opacity = 0 // avoid showing the init style while switching the 'active' class box.classList.add('in-active') box.classList.remove('active') // force 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>
let box = document.querySelector('.dd_box')
let ddCb = document.querySelector('#dd_cb')
var inputs = document.querySelectorAll("input[type=radio]"),
x = inputs.length;
while (x--)
inputs[x].addEventListener("change", function() {
alert('click');
box.style.opacity = 0 // avoid showing the init style while switching the 'active' class
box.classList.add('in-active')
box.classList.remove('active')
// force dom update
setTimeout(() => {
box.classList.add('active')
box.style.opacity = ''
}, 5)
box.addEventListener('animationend', onanimationend)
}, 0);
//
ddCb.addEventListener('change', () => {
box.classList.add('active')
})
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>
let box = document.querySelector('.dd_box')
let ddCb = document.querySelector('#dd_cb')
let ddRb = document.querySelector('.dd_rb')
var inputs = document.querySelectorAll("input[type=radio]"),
x = inputs.length;
while (x--)
inputs[x].addEventListener("change", function() {
alert('click');
box.style.opacity = 0 // avoid showing the init style while switching the 'active' class
box.classList.add('in-active')
box.classList.remove('active')
// force dom update
setTimeout(() => {
box.classList.add('active')
box.style.opacity = ''
}, 5)
box.addEventListener('animationend', onanimationend)
}, 0);
// play normal
ddCb.addEventListener('change', () => {
box.classList.add('active')
})
// play in reverses
ddRb.addEventListener('click', () => {
box.style.opacity = 0 // avoid showing the init style while switching the 'active' class
box.classList.add('in-active')
box.classList.remove('active')
// force 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.