Question

在一个练习中，每次单击按钮后，我都创建了一个新元素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);

Answer 1

尝试一下：

Auth::loginUsingId(1);
Auth::user(); //Will work

Answer 2

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

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);

Answer 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);

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

3 个答案: