When used individually, these functions work flawlessly. However, toggling between them resulted in both arrays containing the same elements, some being multiplied based on the number of clicks.
var playerBtn1 = [];
var playerBtn2 = [];
var btn = document.getElementsByTagName("button");
playerA();
function playerA() {
for(let i = 0; i <btn.length; i++) {
btn[i].addEventListener("click", () => {
playerBtn1.push(btn[i]);
playerB();
});
}
return playerBtn1;
}
function playerB() {
for(let k = 0; k <btn.length; k++) {
btn[k].addEventListener("click", () => {
playerBtn2.push(btn[k]);
playerA();
});
}
return playerBtn2;
}
Edit: I managed to resolve the issue by eliminating my functions and one Event Listener. Consolidating everything together made it work seamlessly. Below is the refined code snippet:
var playerBtn1 = [];
var playerBtn2 = [];
var click = 0;
var btn = document.getElementsByTagName("button");
for(let i = 0; i <btn.length; i++) {
btn[i].addEventListener("click", () => {
if(click % 2 == 0) {
btn[i].innerHTML = '<i class="fas fa-times fa-5x"></i>';
btn[i].disabled = "true";
playerBtn1.push(btn[i].id);
}
else {
btn[i].innerHTML = '<i class="far fa-circle fa-4x"></i>';
btn[i].disabled = "true";
playerBtn2.push(btn[i].id);
}
click++;
});
}