I want to change my code for obtaining creation of new round box after clicking any box from new created set of them, not only first box. How could I obtain this ability for my code?
const box = document.querySelector('.box')
box.addEventListener('click', () => {
const setbox = document.createElement('div')
document.body.appendChild(setbox).classList.add('box')
})body {
background-color: black;
}
.box {
width: 100px;
height: 100px;
background-image: linear-gradient(45deg, red, yellow);
border-radius: 40px;
transition: box-shadow 0.5s ease;
display: inline-block;
user-select: none;
}
.box:hover {
box-shadow: inset 0px 0px 10px 8px rgba(55, 155, 50), inset 0px 0px 10px 16px rgba(55, 155, 255), inset 0px 0px 10px 24px rgba(155, 55, 255);
transition: box-shadow 0.5s ease;
}<div class="box"></div>0
To achieve this you can use a single event handler delegated to an element which contains all the .box elements. In the example below I created a new div with the class .box-container. This approach means that one event handler, defined before runtime, will handle a theoretically infinite number of .box elements.
const container = document.querySelector('.box-container');
const box = document.querySelector('.box')
container.addEventListener('click', e => {
if (!e.target.closest('.box'))
return;
const setbox = document.createElement('div');
setbox.classList.add('box');
container.appendChild(setbox);
})body {
background-color: black;
}
.box {
width: 100px;
height: 100px;
background-image: linear-gradient(45deg, red, yellow);
border-radius: 40px;
transition: box-shadow 0.5s ease;
display: inline-block;
user-select: none;
}
.box:hover {
box-shadow: inset 0px 0px 10px 8px rgba(55, 155, 50), inset 0px 0px 10px 16px rgba(55, 155, 255), inset 0px 0px 10px 24px rgba(155, 55, 255);
transition: box-shadow 0.5s ease;
}<div class="box-container">
<div class="box"></div>
</div>3
And every time add a new element, you need to bind the event to to it.
const box = document.querySelector('.box')
const bindEvent = (el) => {
el.addEventListener('click', () => {
const setbox = document.createElement('div')
document.body.appendChild(setbox).classList.add('box')
bindEvent(setbox)
})
}
bindEvent(box); <style>
body{
background-color:black;
}
.box{
width:100px;
height:100px;
background-image: linear-gradient(45deg, red, yellow);
border-radius:40px;
transition: box-shadow 0.5s ease;
display:inline-block;
user-select:none;
}
.box:hover{
box-shadow:inset 0px 0px 10px 8px rgba(55, 155, 50), inset 0px 0px 10px 16px rgba(55, 155, 255), inset 0px 0px 10px 24px rgba(155, 55, 255);
transition: box-shadow 0.5s ease;
}
</style>
<div class="box"></div>