Currently facing a challenge where I am trying to implement a function that captures click events on squares. The objective is to capture the click event on every button with the square class.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-area',
template: `
<div id="statusArea" className="status">Next player: <span>X</span></div>
<div id="winnerArea" className="winner">Winner: <span>None</span></div>
<button id="reset">Reset</button>
<section>
<div class="row" *ngFor="let row of [1, 2, 3]">
<button *ngFor="let col of [1, 2, 3]" class="square" style="width:40px;height:40px;"></button>
</div>
</section>
`,
styles: []
})
export class MainAppComponent implements OnInit {
ngOnInit() {
const resetButton = document.getElementById('reset');
const squares = Array.from(document.querySelectorAll('.square'));
squares.forEach(square =>{
square.addEventListener('click', function handleClicks(event){
console.log('Button Clicked!');
})
});
resetButton.addEventListener('click', function handleResetClick(event){
console.log("Reset Clicked");
});
}
}