第六天的练习开始像真正的小交互：切换显示状态、记录每个元素被点击的次数、用循环生成规则化内容。它们共同指向一个问题：状态该存在哪里？

标志位记录看不见的状态

元素是否显示不一定能只靠样式读取判断。用一个布尔变量明确记录状态，逻辑会更稳定：

let isVisible = true

button.onclick = function () {
  panel.style.display = isVisible ? 'none' : 'block'
  isVisible = !isVisible
}

这里 isVisible 是标志位。点击后先根据旧状态更新页面，再把状态取反，为下一次点击做好准备。变量名应写成问题本身，例如 isVisible、hasSelected，而不是模糊的 flag。

每个元素需要自己的状态

多个按钮或多个可点击方块不能共用一个点击次数，否则一次点击会影响全部。状态可以放进循环块中形成独立闭包，或关联到对应的对象上：

for (let index = 0; index < boxes.length; index += 1) {
  let count = 0

  boxes[index].onclick = function () {
    count += 1
    boxes[index].innerText = `第${count}次点击`
  }
}

这里每次循环都有一个独立的 count。后续学习函数和闭包时，会更完整地解释为什么事件回调仍能访问它。

嵌套循环处理二维结构

外层循环处理每一行，内层循环处理当前行的每一项：

const table = [[1, 2], [3, 4], [5, 6]]

for (let row = 0; row < table.length; row += 1) {
  for (let column = 0; column < table[row].length; column += 1) {
    console.log(table[row][column])
  }
}

用同样的结构可以生成九九乘法表：外层决定第几行，内层拼接该行的每一个 <li>，最后再把一整行写进页面。先在内层累积字符串、再一次性插入外层结构，比反复覆盖内容更容易控制。

今天把“数据状态”和“显示结果”分开记录后，交互题不再只能靠试错。页面是状态的呈现，变量或对象才是状态本身的归属地。