создать и добавить элемент "li" после клика - PullRequest
Новая
       17

создать и добавить элемент "li" после клика

0 голосов
/ 19 апреля 2020

В упражнении я создал новый элемент 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);

Ответы [ 3 ]

0 голосов
/ 19 апреля 2020

Эта проблема связана с замыканиями в 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);
0 голосов
/ 19 апреля 2020

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);
0 голосов
/ 19 апреля 2020

попробуйте это: 

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