单击后创建并添加“li”元素答案

【问题标题】：create and add "li" element after click单击后创建并添加“li”元素
【发布时间】：2020-04-19 12:37:22
【问题描述】：

在练习中，我在每次单击按钮后创建了一个新元素 li。它不起作用。在控制台中它报告“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;

}

if (number % 3 == 0) {
  li.classList.add('big');
}


ul.appendChild(li);
number += 2;

btn.addEventListener("click", fcn);

【问题讨论】：

const 具有阻塞范围，因此您将无法在功能块 ({}) 之外访问 li。此外，您将在将来某个时间点调用fcn（当您单击按钮时），而li.classList.add('big'); 将在您的JS 脚本首次运行时运行，因此即使您可以在函数之外访问li，@ 987654329@ 还没有被定义，因为fcn 还没有初始化它。我猜您打算将您的 if 和 ul.appendChild 等...放在您的函数中...

标签： javascript function click add

【解决方案1】：

试试这个：

 const btn = document.querySelector("button");
 let number = 1;
 const ul = document.querySelector("ul");
 const fcn = function () {
 const li = document.createElement('li');
 li.textContent = number;



if (number % 3 == 0) {
li.classList.add('big');
}


ul.appendChild(li);
number += 2;

}
btn.addEventListener("click", fcn);

【讨论】：

【解决方案2】：

这个问题与 javascript 中的闭包有关。 li 在函数 fcn 之外无法访问。

following code should solve your problem.

const btn = document.querySelector("button");
let number = 0;
const ul = document.querySelector("ul");
const fcn = function () {
   number += 1;
   const li = document.createElement('li');
   li.textContent = number;
   ul.appendChild(li);

   if (number % 3 == 0) {
      li.classList.add('big');
   }

}
btn.addEventListener("click", fcn);

【讨论】：

【解决方案3】：

li 在匿名函数中定义。

当您在函数内定义变量/常量时，它是该函数的本地变量，不能在函数外部访问。它具有功能级范围。

要修复您的代码，请在全局范围内的函数外部定义 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;

  if(number % 3 == 0){
     li.classList.add('big');
  }

  ul.appendChild(li);
  number += 2;
}
  btn.addEventListener("click", fcn);

【讨论】：