Code notworking

#1

HTML part

<div class="cont">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>
<div class="div">1</div>

CSS part

body{
  margin:0;
  padding:0;
  user-select:none;
}
.cont{
  display:flex;
  justify-content:space-evenly;
  align-items:center;
  height:100vh;
}
.div{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  font-size:50px;
}

JS part

console.clear()

const button = document.querySelectorAll('button')
let arr = Array.from(button)
const div = document.querySelector('.div')

arr.forEach((list) => {
  list.addEventListener('click',() => {
    console.log(div.innerText = list.textContent)
  })
})

My thinking is that when I absolute positioned the div,the event stopped working

#2

The positioning of the Div shouldn’t affect your event listener. Are you trying to print the innerText of the numbers into the div with the class of div? if so then it should work, I just tried it and it works for me.
Capture

Capture2

#3

It’s because the .div is at max width and height (because of the top: 0 left: 0 right etc) and it’s displayed on top of the .cont, and so you can’t click anything inside the latter one (you can check it with inspect element). You could just use the top and left property without the right and bottom so that it won’t be at full size, or you could put it below the .cont by assigning a lower z-index.

#4

I just realized i never linked the style sheet when i tried it. :expressionless:
and this is why i generally use code pen for stuff like this.

#5

It worked,but still don’t understand the reason why it happened

#6

Well, the .div element covers the entirety of the screen because it has position absolute and is at position 0 in every side.
I don’t know the stacking order of html elements, but in this case the .div is layered on top of the .cont element. So, whenever you try to click a button, you are actually clicking the .div element and not the button.
I’m not very good at explaining this, so maybe someone else can give you a better answer.
Also, this might help:


#7