'How to select only The Necessary Html using Event Delegation in Javascript
I am a newbie to JS.I am building a calculator . I am using event delegation to add event listeners however There is a small error. when i click on button of a calculator i access its html However when i accidentaly click somewhere else i select the entire Div . How to select only the necessary buttons , Below is my code .
<div class="calculator">
<div class="input" id="input"></div>
<div class="buttons">
<div class="operators">
<div>+</div>
<div>-</div>
<div>×</div>
<div>÷</div>
</div>
<div class="leftPanel">
<div class="numbers">
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="numbers">
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="numbers">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="numbers">
<div>0</div>
<div>.</div>
<div id="clear">C</div>
</div>
</div>
<div class="equal" id="result">=</div>
</div>
</div>
Below is the JS Code I use to add event listeners .
var number = document.querySelector(".leftPanel");
number.addEventListener("click", (event) => {
console.log(event.target);
Data = Data + event.target.innerHTML;
// console.log(Data);
input.innerHTML = globalNumber ? globalNumber + Data : Data;
if (Data[Data.length - 1 === '+'] || Data[Data.length - 1 === '-']) {
isOperator = true;
}
});
the event target also selects all the numbers inside the div. how do i select only the button and not the entire Div ?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
