Html Question posted in
Some basic documentation can be found here.

Html – How could I obtain clickable box ability for every box I have newly created for creating new boxes at the end of boxes row

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search