Click nested elements in JavaScript

Question

Using only JavaScript, I want to create five nested divs. When clicking one of them, I want that only that div's background to change its color (according to an array of colors).

My problem here is that, because the divs are nested, clicking on any one of them will just color the largest one (the parent). The rest of the code is okay because if I struggle to click on a border, I can actually achieve what I want. But the idea is to work when clicking inside of the smaller div.

var currentParent = document.body;
var colors = ['red', 'black', 'green', 'pink', 'purple']
var divArray = []

for (let i = 0; i < 5; i++) {
    let currentDiv = document.createElement("div")
    currentDiv.style.width = `${(i * 10 + 20)}px`
    currentDiv.style.height = `${(i * 10 + 20)}px`
    currentDiv.position = i
    currentParent.append(currentDiv)
    divArray.push(currentDiv)
    currentParent = currentDiv
}

for (let i = 0; i < 5; i++) {
    divArray[i].onclick = function() {
        this.style.backgroundColor = colors [this.position]
    }
}

look into event.stopPropagation, and learn about event "bubbling". See e.g. javascript.info/bubbling-and-capturing — Alnitak
– Alnitak, Commented Sep 7, 2020 at 18:44
You can use stopPropagation to prevent event bubbling to parents but will need more advanced css if you want the children of the one you click unchanged — charlietfl
– charlietfl, Commented Sep 7, 2020 at 18:47

Turnip · Accepted Answer · 2020-09-07 19:11:27Z

Each loop, a DIV larger than its parent is appended. This means that only the last div can be clicked because it covers the others.

If the sizing logic is reversed so that the DIVs become smaller each loop, the code will work as you expect.

Use event.stopPropagation(); to prevent the event from bubbling to the other elements.

var currentParent = document.body;
var colors = ['red', 'black', 'green', 'pink', 'purple']
var divArray = []

for (let i = 0; i < 5; i++) {
    let currentDiv = document.createElement("div")
    currentDiv.style.width = `${(60 - i * 10)}px`
    currentDiv.style.height = `${(60 - i * 10)}px`
    currentDiv.position = i
    currentParent.append(currentDiv)
    divArray.push(currentDiv)
    currentParent = currentDiv
}

for (let i = 0; i < 5; i++) {
    divArray[i].onclick = function(e) {
        e.stopPropagation();
        this.style.backgroundColor = colors [this.position]
    } 
}

div {
  outline: 1px solid orange;
  background: #FFF;
}

Fennec · Accepted Answer · 2020-09-07 18:57:26Z

0

You need to stop event Propagation on the onclick event, like so

divArray[i].onclick = function(event) {
  event.stopPropagation();
  this.style.backgroundColor = colors [this.position]
}

There is also preventDefault, to prevent the default behaviors, like a link or form button for example.

var currentParent = document.body;
var colors = ['red', 'black', 'green', 'pink', 'purple']
var divArray = []

for (let i = 0; i < 5; i++) {
    let currentDiv = document.createElement("div")
    currentDiv.style.width = `${(i * 10 + 20)}px`
    currentDiv.style.height = `${(i * 10 + 20)}px`
    currentDiv.position = i
    currentParent.append(currentDiv)
    divArray.push(currentDiv)
    currentParent = currentDiv
}

for (let i = 0; i < 5; i++) {
    divArray[i].onclick = function() {
        this.style.backgroundColor = colors [this.position]
    }
}

div{
  border: 1px solid #000;
}

edited Sep 7, 2020 at 18:57

answered Sep 7, 2020 at 18:44

Fennec

1,97217 silver badges31 bronze badges

1 Comment

Fennec Over a year ago

Pretty sure it's a css problem, check the positions of your divs, if you are using position:absolute or position:relative check the z-index ... I can't tell without your css, but from the js the divs are getting bigger and bigger, in a way that the last div cover the precedent one (you can't click the precedent div) ... edited my answer to illustrate the issue

Collectives™ on Stack Overflow

Click nested elements in JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related