box.this too

and the unexpected object

by trentHarlem

HTML

<div id='click' class='box3'>
<!--   <p>
  </p> -->
</div>

<div class='box0'>
  <p>
  </p>
</div>

<div class='box1'>
  <p>
  </p>
</div>

<div class='box2'>
  <p>
  </p>
</div>

CSS

body,
html {
  font: 1.1rem system-ui;
  background-color: yellow;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 10px;
}

div {
  padding: 10px 0;
  transition: all ease-in-out 1s;
  cursor: crosshair;

}

.box3 {
  min-height: 50px;
  background-color: red;
}

.box0 {
  /* width: 75px; */
  min-height: 60px;
  background-color: green;
}

.box1 {
  /* width: 100px; */
  min-height: 70px;
  background-color: blue;
}

.box2 {
  min-height: 100px;
  background-color: dodgerblue;

}

JavaScript

const boxes = document.querySelectorAll('div')
const keys = Object.keys(boxes); //4
const boxArray = []
const boxArrayDotFrom = Array.from(boxArray)
const qsa = Array.from(boxes)
const length = qsa.length; //4

// for loop version
/*  for (let i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("click", function logStyle() {
    let w = this.clientWidth;
    let h = this.clientHeight;
    let style = getComputedStyle(this)
    let c = style.backgroundColor
    let index = i
 
    if (boxArray === 0) {
      boxArray.push(i)
    } else {
      boxArray.shift()
      boxArray.push(i)
    }
    this.nextElementSibling.innerHTML = ` Next Sibling of box # ${index}<br>`
    this.innerHTML += ` THIS is index # ${index} `
    this.innerHTML += `<strong>boxArray</strong> = ${boxArray} `
    this.innerHTML += `<br> 'listener', 'H', ${h}, 'W', ${w}, 'Color', ${c}`
    
    console.log('', this.textContent)
    console.log('boxArray', boxArray)
    console.log('listener', 'H', h, 'W', w, 'Color', c)
  });
 }
  */
 
 // forEach() version
 
   boxes.forEach((boxes, i) => {   
  boxes.addEventListener('click', function logStyle() {
 
    let w = this.clientWidth;
    let h = this.clientHeight;
    let style = getComputedStyle(this)
    let c = style.backgroundColor 
    let index = i
 
    if (boxArray === 0) {
      boxArray.push(i)
    } else {
      boxArray.shift()
      boxArray.push(i)
    } 
    this.nextElementSibling.innerHTML = ` Next Sibling of box # ${index}<br>`
    this.innerHTML += ` THIS is index # ${index} `
    this.innerHTML += `<strong>boxArray</strong> = ${boxArray} `
    this.innerHTML += `<br> 'listener', 'H', ${h}, 'W', ${w}, 'Color', ${c}`
    
    console.log('', this.textContent)
    console.log('boxArray', boxArray)
    console.log('length', length)
    console.log('listener', 'H', h, 'W', w, 'Color', c)
  });
  }, this);