为什么 addEventListener 点击不显示数据集？

Question

Im trying to make this code work but when I click on the selected .grid-element the addEventListener doesnt do what it supposed to do (display the data-number on .screen ).

 let display = document.querySelector(".screen"); let numberPress = document.querySelector(".grid-element"); numberPress.addEventListener("click", function(){ display.innerHTML = numberPress.dataset.number; });

 <div class="screen">0</div> <div class="grid-container"> <button class="grid-element" data-number>7</button> <button class="grid-element" data-number>8</button> <button class="grid-element" data-number>9</button> </div>

Answer 1

Add a handler per.grid-element:

document.querySelectorAll(".grid-element").forEach((gridElement) => {
  gridElement.addEventListener("click", function(){
    display.innerHTML = numberPress.dataset.number;
  });
});

Answer 2

It's because data-number has no value. I edited your js code little bit and change querySelector to querySelectorAll because you need to select multiple items.

 document.querySelectorAll(".grid-element").forEach((x) => x.addEventListener("click", function(){ document.querySelector(".screen").innerHTML = x.dataset.number }) );

 <div class="screen">0</div> <div class="grid-container"> <button class="grid-element" data-number="7">7</button> <button class="grid-element" data-number="8">8</button> <button class="grid-element" data-number="9">9</button> </div>