Onmousedown 事件函数处理无法获取外部变量的值

Question

在我的 cell.onmousedown 函数中，当我 console.log(cell) 它 returns 外部函数中定义的单元格的值但是当我尝试 console.log(something else) 时 selectedText 它 returns selectedText 是 undefined 即使我已经在外部函数中定义了它在编写类似的东西之前对我有用。谁能看出这是什么问题？

这是我创建网格并在按下网格中的 div 时处理事件的函数：

function createGrid(rows, cols) {
    let mousePressed = false;
    let wordsFound = 0;
    let selectedText = '';
    let selectedCells = [];
    let variables = [];
    grid.style.setProperty('--grid-rows', rows);
    grid.style.setProperty('--grid-cols', cols);
    for (var row = 0; row < rows; row++) {
        for (var column = 0; column < cols; column++) {
            let cell = document.createElement('div');
            cell.innerText = randomChoice(alphabet);
            cell.id = `${column} ${row}`;
            cell.onmousedown = function() {
                console.log(cell)
                console.log(selectedText)
                variables = mouseDown(cell, selectedText, selectedCells);
                selectedText = variables[0];
                selectedCells = variables[1];
                mousePressed = variables[2];
            }
            cell.onmouseover = function() {
                variables = mouseOver();
                selectedText = variables[0];
                selectedCells = variables[1];
            }
            cell.onmouseup = function() {
                variables = mouseUp(cell, selectedText, selectedCells);
                selectedText = variables[0];
                selectedCells = variables[1];
                mousePressed = variables[2];
            }
            grid.appendChild(cell).className = 'grid-item';
        }
    }
}

Answer 1

我认为您应该在 createGrid 函数中使用 var 而不是 let。

let is a block scope declaration for variables.

function letTest() {
 let x = 1;
  {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

Answer 2

我好像已经解决了这个问题。 onmouseover 在我没有意识到的时候是运行，而运行在预期的时候是一个没有参数的函数。因此，当 selectectedText 和 selectedCells 被更改为根据函数的值时，它们的值被更改为 undefined 使得它看起来像变量从未被定义在第一位。

所做的更改：

cell.onmouseover = function() {
                variables = mouseOver(cell, selectedText, selectedCells, mousePressed);
                selectedText = variables[0];
                selectedCells = variables[1];
            }

Onmousedown 事件函数处理无法获取外部变量的值

Onmousedown event function handling not able to grab the value of an outer variable

javascript

event-handling