Clicking on an empty area causes events to be generated

September 17, 2022

I am currently implementing a calculator using HTML,CSS,Javascript.Chrome v 105 used,javascript event bubbling has been used.The calculator works ok if I click on the buttons but the problem occurs if I click a little bit right on an empty area(about say 1 or 2 cm in the empty area to the right of the numbers 2 or 8 or 0 or the . symbol) then I see multiple events being generated(in the console.log and UI) and the corresponding button values in the div being captured so how do I rectify this issue, please help me understand as I am not so experienced in javascript.

let temp = [];
let arrayOfStrings=[];
document.addEventListener('DOMContentLoaded', () => {
                document.getElementById('wrapper').addEventListener('click',Calculat);
                document.getElementById('clear1').addEventListener('click', () => {
                    temp = [];
                    arrayOfStrings=[];
                    document.getElementById('buffer_zone').textContent=(''); 
                    });
    });
function Calculat(e) {
    z=e.target.innerText;
    console.log(z);
document.getElementById('buffer_zone').append(z);
if (z =='='){
document.getElementById('buffer_zone').append( eval(arrayOfStrings));
return false;
}
temp.push(z);
arrayOfStrings = temp.join("");
}

button{
    border: 0;
    line-height: 3.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}
button:hover {
    background-color: green;
}
button{
    border: 0;
    line-height: 3.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}
button:hover {
    background-color: green;
}
}
.flex-container {
  display:flex;
  justify-content: left;
}
.flex-container  div {
 background-color: deepskyblue;
/*margin padding font-size are essential else flex canvas will not be diplayed*/
  margin: 8px;
  padding: 20px;
  font-size: 30px;
}

<div id="wrapper">

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<br>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<br>
   <button>9</button>
   <button>+</button>
   <button>-</button>
   <button>*</button>
   <button>0</button>
<br>
  <button>(</button>
  <button>)</button>
  <button>/</button>
  <button>=</button>
  <button>.</button>
<br>
</div>

<div><button id="clear1">CLEAR</button></div>

<div class="flex-container"><!--just to get nice output on flex canvas -->
   <div id="buffer_zone"></div>
</div>

>Solution :

That’s because you set the listener to the wrapper div. set the listener only to every button who is a child of #wrapper:

let temp = [];
let arrayOfStrings=[];
document.addEventListener('DOMContentLoaded', () => {
                document.querySelectorAll('#wrapper button').forEach((button)=> button.addEventListener('click',Calculat));
                document.getElementById('clear1').addEventListener('click', () => {
                    temp = [];
                    arrayOfStrings=[];
                    document.getElementById('buffer_zone').textContent=(''); 
                    });
    });
function Calculat(e) {
    z=e.target.innerText;
    console.log(z);
document.getElementById('buffer_zone').append(z);
if (z =='='){
document.getElementById('buffer_zone').append( eval(arrayOfStrings));
return false;
}
temp.push(z);
arrayOfStrings = temp.join("");
}

button{
    border: 0;
    line-height: 3.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}
button:hover {
    background-color: green;
}
button{
    border: 0;
    line-height: 3.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}
button:hover {
    background-color: green;
}
}
.flex-container {
  display:flex;
  justify-content: left;
}
.flex-container  div {
 background-color: deepskyblue;
/*margin padding font-size are essential else flex canvas will not be diplayed*/
  margin: 8px;
  padding: 20px;
  font-size: 30px;
}

<div id="wrapper">

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<br>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<br>
   <button>9</button>
   <button>+</button>
   <button>-</button>
   <button>*</button>
   <button>0</button>
<br>
  <button>(</button>
  <button>)</button>
  <button>/</button>
  <button>=</button>
  <button>.</button>
<br>
</div>

<div><button id="clear1">CLEAR</button></div>

<div class="flex-container"><!--just to get nice output on flex canvas -->
   <div id="buffer_zone"></div>
</div>