从另一个 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++; }); }