I'm currently working on creating a small calculator using HTML, CSS, and JS.
However, I'm facing an issue with selecting buttons of the calculator from the HTML script and adding EventListeners to them. Here is a snippet of my HTML code:
`<table class="table1">
<tr>
<td id="n-1">1</td>
<td id="n-2">2</td>
<td id="n-3">3</td>
</tr>
<tr>
<td id="n-4">4</td>
<td id="n-5">5</td>
<td id="n-6">6</td>
</tr>
<tr>
<td id="n-7">7</td>
<td id="n-8">8</td>
<td id="n-9">9</td>
</tr>
</table>`
Below is the event function I have implemented:
document.querySelector(.table1 td).addEventListener('click',function(){
console.log('It works');
var z = this.value;
console.log(z);
});
Oddly enough, I am only able to see the console output when clicking on the first cell in the table (1). For some reason, it doesn't work when I click on other cells like 3 or 7.
If you have any insights or solutions to this problem, I would greatly appreciate it. Thank you!