点击按钮创建<li>元素时控制台报错‘li is not defined’，求排查

嘿，我一眼就看出问题所在啦！控制台报li is not defined主要是变量作用域和代码结构的问题，咱们拆解来看：

核心问题点 #

• 变量作用域错误：你在fcn函数内部定义了const li = document.createElement('li');，但后面的if判断、ul.appendChild(li)这些代码都写在了函数外面——函数内部的变量只能在函数里访问，外面根本找不到这个li，自然就报错啦。
• 代码逻辑结构错误：你的fcn函数只包裹了创建li和设置文本的部分，剩下的逻辑（判断样式、添加到列表、更新数字）都在函数外，这些代码只会在页面加载时执行一次，完全没和按钮点击事件绑定起来，就算没有报错，点击按钮也不会有效果。

修正后的代码 #

const btn = document.querySelector("button");
let number = 1;
const ul = document.querySelector("ul");

const fcn = function() {
  const li = document.createElement('li');
  li.textContent = number;
  
  // 把所有逻辑都放到函数内部，这样就能访问到li变量了
  if (number % 3 == 0) {
    li.classList.add('big');
  }
  
  ul.appendChild(li);
  number += 2;
}

btn.addEventListener("click", fcn);

修正说明 #

把所有点击按钮后需要执行的逻辑都放进fcn函数内部：

1. 这样li变量在函数内部的作用域里，后续的判断和添加操作都能正常访问它；
2. 每次点击按钮时，都会完整执行「创建li → 设置文本 → 判断是否添加样式 → 把li加到列表 → 更新数字」的流程，功能就能正常运行啦。

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