Etch-A-Sketch游戏开发问题：关闭Prompt或输入空值时网格需保留

问题描述 #

我正在开发Etch-A-Sketch游戏，其余功能均已完成，但存在以下问题：当用户关闭prompt弹窗或输入空字符串（直接点击确定）时，网格应保留原有绘图而非重置。我尝试添加判断null或空值的返回逻辑后，容器变为空，而非不影响当前文档。

相关代码 #

HTML按钮 #

<button class="ask-size" onclick="askSize()">Grid size</button>

JavaScript代码 #

function askSize() {
  container.innerHTML = '';
  gridSize = prompt('Enter the grid size (1-100):')
  
  if (gridSize <= 100) {
    createGrid(gridSize)
    displayGridSize.textContent = `Current grid size is ${gridSize} x ${gridSize}`
    para.appendChild(displayGridSize)
  } 
  else {
    alert('Please enter a valid value.')
    return askSize()
  }
}

function createGrid(gridSize) {
  for (let i = 0; i < (gridSize * gridSize); i++) {
    const cell = document.createElement('div');
    cell.style.flexBasis = 100 / gridSize + '%';
    container.appendChild(cell);
  }
} 

createGrid(16) // 创建默认16x16网格

尝试的无效代码 #

if(gridSize === null || gridSize === ""){ return }

问题原因 #

核心问题是askSize函数一开始就执行了container.innerHTML = '';，这行代码会先清空容器，之后才处理用户输入。哪怕后续判断到用户取消弹窗或输入空值并返回，容器已经被清空，无法保留原有网格。

解决方案 #

将清空容器的操作移到输入验证通过之后，同时完善输入判断逻辑，覆盖所有无效输入场景：

修改后的JavaScript代码 #

function askSize() {
  const gridSizeInput = prompt('Enter the grid size (1-100):');
  
  // 用户关闭弹窗或输入空/纯空格字符串时，直接返回不做操作
  if (gridSizeInput === null || gridSizeInput.trim() === "") {
    return;
  }

  const gridSize = parseInt(gridSizeInput);
  // 验证输入是否为1-100之间的有效数字
  if (isNaN(gridSize) || gridSize < 1 || gridSize > 100) {
    alert('请输入1-100之间的有效数值。');
    return askSize();
  }

  // 输入有效后，再清空容器并创建新网格
  container.innerHTML = '';
  createGrid(gridSize);
  displayGridSize.textContent = `当前网格尺寸：${gridSize} x ${gridSize}`;
  para.appendChild(displayGridSize);
}

function createGrid(gridSize) {
  for (let i = 0; i < (gridSize * gridSize); i++) {
    const cell = document.createElement('div');
    cell.style.flexBasis = 100 / gridSize + '%';
    container.appendChild(cell);
  }
} 

createGrid(16); // 页面加载时创建默认16x16网格

关键修改点 #

• 把container.innerHTML = '';移到输入验证通过后执行，避免无效输入时清空原有网格
• 新增trim()处理，覆盖用户输入纯空格的场景
• 将输入转为整数并验证是否为有效数字，避免非数字输入导致的逻辑错误
• 调整判断顺序，优先处理取消/空输入，再处理无效数值，最后执行有效操作

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