如何在do while循环中访问函数作用域变量？解决size未定义错误

嘿，你推测的原因完全正确！问题就出在变量作用域上：你用let在do代码块内部声明了size，而while条件判断是在这个代码块的外部，根据JavaScript的块级作用域规则，外部是访问不到内部声明的let变量的，所以才会抛出"size is not defined"的错误。

修正步骤 #

1. 调整size的作用域 #

把size的声明移到do-while循环的外面，这样while条件就能正常访问到它了：

const newGrid = document.getElementById('new-grid');
newGrid.addEventListener('click', createGrid);
const main = document.querySelector('main');

function createGrid() {
  let size; // 把size声明移到循环外部
  do {
    size = parseInt(prompt("Please enter a number from 1 to 64", ""), 10); // 这里不再用let重新声明
  } while(isNaN(size) || size > 64 || size < 1);
  
  // 校验通过后再创建网格
  const numPx = (600 / size) - 2;
  let px = numPx + 'px';
  for (let i = 0; i < size; i++) {
    for (let j = 0; j < size; j++) {
      const div = document.createElement('div');
      div.setAttribute('class', 'grid');
      main.appendChild(div);
      div.setAttribute('style', `width: ${px}; height: ${px}`);
    }
  }
}

2. 优化逻辑（额外建议） #

原来的代码不管用户输入是否合法，都会先执行创建网格的逻辑，这显然不合理。上面的修正已经把网格创建代码移到了do-while循环之后，只有当用户输入符合要求（1-64之间的数字）时，才会生成网格，避免无效操作。

补充说明 #

• let和const都是块级作用域变量，它们的作用范围仅限于当前代码块（比如{}包裹的区域）；
• 如果把变量声明放在循环外部，整个函数范围内都能访问到它，自然就能在while条件中使用了。

内容的提问来源于stack exchange，提问作者user7217977