box.this

and the unexpected object

by trentHarlem

HTML

<div class="box" onclick="logSize(this)">
  <p>
  </p>
</div>

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

<div id="big">
  <p id='screen'>
  </p>
</div>

<div class="click" onclick="logSize(this), grow()" >
  <p>
  </p>
</div>

CSS

* body, html {
 transition: all ease 1s;
}

.click {
  width: auto;
  height: 50px;
  cursor: grab;
  background-color: red;
}
.box {
  width: auto;
  height: 60px;
  cursor: grab;
  background-color: green;
}
.box2 {
  width: auto;
  height: 70px;
  cursor: grab;
  background-color: blue;
}
#big {
  width: auto;
  height: 100px;
  cursor: grab;
  background-color: dodgerblue;
  
}

.grow {
  transition: all ease 0.5s;
  height: 120px;
}

JavaScript

let box = document.querySelector('div')
//console.log('length', box.length); //4
//console.log('keys', Object.keys(box)); //4

const logSize = (x) => {
  let w = x.clientWidth
  let h = x.clientHeight
  console.log('click', h, w)
}

const grow = () => box.classList.toggle("grow");

box.addEventListener('click', grow())