将数组传递给函数但记录为未定义答案

【问题标题】：passing an array to a function but logs as undefined将数组传递给函数但记录为未定义
【发布时间】：2020-11-03 16:46:38
【问题描述】：

我有 2 个事件侦听器，它们都将被点击的元素推送到 2 个单独的数组中。这些console.log 在事件侦听器中按预期运行，但是当我将它们传递给move 函数时，它们都返回未定义。

我已经尝试过将选择的元素也传递给函数，结果相同。

document.querySelectorAll('img').forEach(function(el) {
    el.addEventListener('click' , function(params) {
        el.classList.add('selected')
        selectedPieces.push(el)
        console.log(selectedPieces)
        moveBy(selectedPieces)
    })
})

document.querySelectorAll('.square').forEach(function(el) {
    el.addEventListener('click', function() {
        el.classList.add('target')
        targetPieces.push(el)
        console.log(targetPieces)
        moveBy(targetPieces)
    })
})

function moveBy(selected,target) {
    console.log(selected)
    console.log(target)
}

【问题讨论】：

在您的click 事件监听器中，是否定义了el 变量？
这究竟是如何工作的？ selectedPieces 和 targetPieces 的修改是在（至少）两个不同元素的单击事件处理程序中完成的。而且您只将一个变量传递给moveBy 中的任何一个。
@taplar 我认为这回答了我的问题，我希望将 selectedPiece 和 targetPiece 传递给 moveBy 函数，在那里我可以处理碎片的移动。我以为我可以从不同的 eventListeners 传入 2 个参数，它会处理它
不，函数参数不是这样工作的。对于每次调用，如果您不通过它们，它们就不会通过。没有“我记得你以前传递过这个参数”的逻辑。
@taplar 嗯，那会杀死我在这里的代码。回到绘图板！

标签： javascript arrays event-handling

【解决方案1】：

所以我确实在这方面创造了一个解决方法。它涉及将 addEventListeners 发送到它们自己的函数，然后将它们添加到一个数组中，然后将该数组发送到它自己的函数，然后我可以移动它们。

这个版本唯一的问题是它只能工作一次，所以我目前正在研究导致它只触发一次的原因。

document.querySelectorAll('img').forEach(function(el) {
    el.addEventListener('click' , addselected)
})

document.querySelectorAll('.square').forEach(function(el) {
    el.addEventListener('click', addtarget)
})


function addselected(selected){
    console.log('---addselected---')
    var select = selected.path[0]
    moveList.push(select)
}

function addtarget(target){
    console.log('---addtarget---')
    if (target.path.length === 7){
        var tar = target.path[1]
    }else{
        var tar = target.path[0]
    }

    moveList.push(tar)
    moveBy(...moveList)
}


function moveBy(...moveList) {
    console.log('---moveBy---')
    let moveTarg = moveList[2]
    let moveSel = moveList[0]
    if (typeof moveTarg === 'undefined') {
        console.log('not working')
    }else{
        moveTarg.appendChild(moveSel)
        moveList = []
    }
    console.log(moveList)
    
}

【讨论】：

【解决方案2】：

很好


function moveBy(selected,target) {
    console.log(selected)
    console.log(target)
}

有两个参数。


        moveBy(targetPieces)

但你只传入一个参数。

【讨论】：

那么解决办法是什么？
但是如果我从不同的事件侦听器中传入两者，这对函数如何处理它有影响吗？
你永远不会同时传入两者。你只是传递一个。
您不是一次将一个单独的传递给同一个函数，而是在每次调用时创建函数的副本，并且在函数的每次调用中，您传递一个变量...第二个变量从未定义。