Пытаюсь сделать фоновый эффект. При нажатии клавиши создается div, который исчезает через полсекунды. Каждый раз, когда нажимается клавиша, создается новый div с новым идентификатором. Как удалить каждый div через полсекунды после его запуска?

Я забыл упомянуть, что у меня есть функция, которая сокращает document.getElementById('id') до $('id'). Я не использую jQuery.

Вот мой код.

function $(e) {
  return document.getElementById(e)
}

let circles = 0;
onkeypress = () => {
  document.body.insertAdjacentHTML('beforeend', `<div class="effect" id="l${circles}"></div>`)
  setTimeout(function(){
    $(`l${circles}`).remove()
  },500)
  circles++
}
2
pineapplerind0215 17 Мар 2021 в 18:16

2 ответа

Лучший ответ

Если вы используете setTimeout, он будет использовать значение счетчика через 500 мс, это означает, что оно больше не равно счетчику, применяемому для создания идентификатора элемента.

Вы должны просто использовать:

onkeypress = () => {
    var el = document.createElement("div");
    el.className = "effect";
    document.body.appendChild(el);
    setTimeout(function(){
        document.body.removeChild(el);
    },500)
}
1
mck89 17 Мар 2021 в 15:25
onkeypress = () => {
    document.body.insertAdjacentHTML('beforeend', `<div class="effect" id="l${circles}"></div>`)
    setTimeout(function() {
        $(`l${circles}`).remove()
        circles++
    }, 500)
}
2
Dan Dao 17 Мар 2021 в 15:47