How to display button value with click eventlistner

i am trying to create a simple calculator project , currently i'm finding it difficult to display the button value in an alert box . i think im making a mistake in the javascript event listner function i just can not figure it out .

Please help me with the script:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const a = document.querySelectorAll(".drum");
var y = a.length;
for (var count = 0; count <= y; count++) {
  var z = a[count];
  var x = z.addEventListener("click", Action);
}

function Action() {
  var displayer = z.target.value;
  alert("Button value :" + displayer);
}

<!-- language: lang-css -->

body {
  text-align: center;
  background-color: #283149;
}

h1 {
  font-size: 5rem;
  color: #DBEDF3;
  font-family: "Arvo", cursive;
  text-shadow: 3px 0 #DA0463;

}

footer {
  margin-top: 100px;
  color: #DBEDF3;
  font-family: sans-serif;
}

.pressed {
  box-shadow: 0 3px 4px 0 #DBEDF3;
  opacity: 0.5;
}

.inp{
  width: 346px;
  border-radius: 5px;
  height: 40px;
  text-align: right;
}


.red {
  color: red;
}

.drum {
  outline: none;
  border: 5px solid #404B69;
  font-size: 50px;
  font-family: 'Arvo', cursive;
  font-weight: 100;
  color: #DA0463;
  text-shadow: 3px 0 #DBEDF3;
  border-radius: 15px;
  display: inline-block;
  width: 80px;
  height: 80px;
  text-align: center;
  margin: 5px;
  background-color: white;
}

<!-- language: lang-html -->

<h1 id="title">My Calculator ✌🏼</h1>
<div >
  <button class="drum" value="1">1</button>
  <button class="drum" value="2">2</button>
  <button class="drum" value="3">3</button>
  <button class="drum" value="+">+</button>
</div>
<div class="set">
  <button class="drum" value="4">4</button>
  <button class="drum" value="5">5</button>
  <button class="drum" value="6">6</button>
  <button class="drum" value="-">-</button>
</div>
<div class="set">
  <button class="drum" value="7">7</button>
  <button class="drum" value="8">8</button>
  <button class="drum" value="9">9</button>
  <button class="drum" value="*">x</button>
</div>
<div class="set">
  <button class="drum" value="0">0</button>
  <button class="drum" value="/">➗</button>
  <button class="drum" value=".">.</button>
  <button class="drum" value="=">=</button>
</div>
<footer>
  Made with ❤️ in Nigeria.
</footer>

<!-- end snippet -->

I have tried reading on eventlistners but have not gotten the problem.

I'm seeing two issues right away, which you can also observe in your browser's debugging tools on the browser console. (The stack snippet in the question makes the console more visible, but you can always view the console in your own browser's tools. This should always be an immediate debugging step.)

First, this is immediately producing an error:

for (var count = 0; count <= y; count++) {
  var z = a[count];
  var x = z.addEventListener("click", Action);
}

Because of the <= used in the loop condition, the last iteration of the loop exceeds the length of the array. Array indexes start at 0 and end just before the length of the array. Change the comparison to <:

for (var count = 0; count < y; count++) {
  var z = a[count];
  var x = z.addEventListener("click", Action);
}

Second, z isn't what you think it is here:

function Action() {
  var displayer = z.target.value;
  alert("Button value :" + displayer);
}

At this point z is the last value from the loop above. Which is just outside of the array. So every event handler is trying to use the same (non-existant) element.

Fortunately, you don't need z from the loop above. The system passes an event object to click handlers, and you can use that object. For example, here I call that object e:

function Action(e) {
  var displayer = e.target.value;
  alert("Button value :" + displayer);
}

Putting them both together:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

const a = document.querySelectorAll(".drum");
var y = a.length;
for (var count = 0; count < y; count++) {
  var z = a[count];
  var x = z.addEventListener("click", Action);
}

function Action(e) {
  var displayer = e.target.value;
  alert("Button value :" + displayer);
}

<!-- language: lang-css -->

body {
  text-align: center;
  background-color: #283149;
}

h1 {
  font-size: 5rem;
  color: #DBEDF3;
  font-family: "Arvo", cursive;
  text-shadow: 3px 0 #DA0463;

}

footer {
  margin-top: 100px;
  color: #DBEDF3;
  font-family: sans-serif;
}

.pressed {
  box-shadow: 0 3px 4px 0 #DBEDF3;
  opacity: 0.5;
}

.inp{
  width: 346px;
  border-radius: 5px;
  height: 40px;
  text-align: right;
}


.red {
  color: red;
}

.drum {
  outline: none;
  border: 5px solid #404B69;
  font-size: 50px;
  font-family: 'Arvo', cursive;
  font-weight: 100;
  color: #DA0463;
  text-shadow: 3px 0 #DBEDF3;
  border-radius: 15px;
  display: inline-block;
  width: 80px;
  height: 80px;
  text-align: center;
  margin: 5px;
  background-color: white;
}

<!-- language: lang-html -->

<h1 id="title">My Calculator ✌🏼</h1>
<div >
  <button class="drum" value="1">1</button>
  <button class="drum" value="2">2</button>
  <button class="drum" value="3">3</button>
  <button class="drum" value="+">+</button>
</div>
<div class="set">
  <button class="drum" value="4">4</button>
  <button class="drum" value="5">5</button>
  <button class="drum" value="6">6</button>
  <button class="drum" value="-">-</button>
</div>
<div class="set">
  <button class="drum" value="7">7</button>
  <button class="drum" value="8">8</button>
  <button class="drum" value="9">9</button>
  <button class="drum" value="*">x</button>
</div>
<div class="set">
  <button class="drum" value="0">0</button>
  <button class="drum" value="/">➗</button>
  <button class="drum" value=".">.</button>
  <button class="drum" value="=">=</button>
</div>
<footer>
  Made with ❤️ in Nigeria.
</footer>

<!-- end snippet -->

Here's a quick refactor of your fiddle that works:

const a = document.getElementsByClassName("drum");

for (var count = 0; count < a.length; count++) {
  addAlertToButtonElement(a[count]);
}



function addAlertToButtonElement(z) {
	z.addEventListener("click", () => {
  	alert("Button value :" + z.value);
  });
}

Some observations:

• getElementsByClassName("classHere") returns a collection of HTML elements -> this is the type on which you want to add the event listener to
• querySelectorAll(".class") returns a NodeList which is a bit different

You were referencing "z" in your Action function while z was a for-loop scoped variable. Also, in that case you needed to remove the target (e.g. z.value not z.target.value) which would fire all the alerts one by one at init and then it wouldn't fire them anymore.
And you were getting an index out of bounds problem because you were looping from 0 to (including) the length (n+1) size of the array.