从一个函数中获取另一个函数中的元素答案

【问题标题】：Getting elements from one function in another one从一个函数中获取另一个函数中的元素
【发布时间】：2021-05-16 11:57:03
【问题描述】：

这些函数在单独工作时可以正常工作，但是当我尝试在它们之间切换时，我在两个数组中都得到了相同的元素。有些是乘以点击次数，有些不是。

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

【问题讨论】：

btn 是页面上的所有按钮。在这两个函数中，您都将事件侦听器添加到页面上的所有按钮。它应该做什么？

标签： javascript arrays function

【解决方案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

【讨论】：

和我之前的效果一样。在我点击 4 次后得到这个 playerBtn1 (8) [button#1, button#2, button#5, button#5, button#4, button#4, button#4, button#4]
是的，但它不是同一个参考。这就是它应该如何工作的方式。你想达到什么目的？，因为我有点困惑。
我没有发布我所有的代码，因为它没有被发布。我的目标是构建一个简单的井字游戏，并使用按钮作为棋盘。第一个函数将 btn 的 innerHTML 更改为十字图标，第二个函数更改为圆形。我只需要这个数组来存储玩家的点击次数并查找是有人获胜还是平局

【解决方案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++; 
        }); 
       
        
}

【讨论】：