從另一個 function 中獲取元素

Question

當它們單獨工作時，這些功能可以正常工作，但是當我嘗試在它們之間切換時，我在 arrays 中得到了相同的元素。 有些乘以點擊次數，有些則不是。

 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; }

編輯。 我已經解決了我的問題，我剛剛擺脫了我的函數和事件監聽器之一。 把所有東西放在一起就可以了。 下面我發布我改進的鱈魚。

 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++; }); }

Answer 1

var btn = document.getElementsByTagName("button");

您在執行此操作時每次都聲明它：

playerBtn1.push(btn[i])

您每次傳遞對相同 html 按鈕（我想您有幾個）的引用。

您可以嘗試這樣做：

playerBtn1.push(btn[i].cloneNode(true))

參考： https://www.w3schools.com/jsref/met_node_clonenode.asp

Answer 2

問題解決了

 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++; }); }