Клонирование элемента и добавление ему аттрибута

Question

Есть следующий код

element = document.getElementsByName('rain');
function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
}

let div = document.createElement('div');
div.className = "rain";

let test = div.cloneNode(true);
base = document.getElementsByTagName('article');

function add_rain() {
    base[0].append(test.setAttribute('animation', "go-left-right "+ getRandomInt(5) +"s infinite"));
}
setInterval(add_rain, 122)

В моем понимании есть донор - div, и я создаю клона и добавляю ему аттрибут. Естественно это не работает. пробовал другие варианты - не помогает(не знаю как).

Должен был получиться этакий дождь.

Answer 1

Метод .setAttribute() ничего не возвращает, поэтому при передаче результата в append ничего не происходит.

Вместо этого, передавать нужно сам элемент test.

test.setAttribute(...);
base[0].append(test);

Кроме того, недостаточно просто вызывать append с одним и тем же элементом. Чтобы было много элементов, каждый раз нужно создавать новый элемент, который будет добавлен на страницу, это значит, что клонирование так же нужно внести внутрь add_rain

Answer 2

let oBase = document.querySelector('article');
/* Генерация псевдослучайного числа */
function fGetRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}
// Создание образца капли/снежинки
let oDrop = document.createElement('div');
// Символ капли/снежинки
oDrop.innerHTML = '&#10052;';
// Общие стили для капли/снежинки
oDrop.className = "rain";

function add_rain() {
  // Создание клона капли/снежинки
  let oClone = oDrop.cloneNode(true);
  /* Обработчик конца анимации */
  oClone.addEventListener('animationend', function() {
    // Самоудаление элемента по завершению анимации
    this.remove();
  });
  // Установка начальной позиции по X
  oClone.style.left = `${1 + fGetRandomInt(98)}%`;
  // Назначение анимации
  oClone.style.animation = `go-left-right ${4 + fGetRandomInt(4)}s linear forwards`;
  // Добавление клона в нужный контейнер
  oBase.append(oClone);
}
/* Запуск */
setInterval(add_rain, 122);

body{margin:0;height:100vh;background-image:url(https://i.stack.imgur.com/m9NKc.png),radial-gradient(#ff8800cc,#4527A0);background-position:0% 0%;background-repeat:no-repeat;background-size:auto}

article {
  position: relative; height: 100%; overflow: hidden;
  background-image: radial-gradient(#f321b221, #0d0023);
}
.rain {
  position: absolute; z-index: -1;
  display: inline-block; color: #fff;
}
@keyframes go-left-right {
  0% { top: -10%; transform: translatex(0px); }
  25% { transform: translatex(-5px); }
  50% { transform: translatex(10px); }
  75% { transform: translatex(-20px); }
  100% { top: 110%; transform: translatex(40px); }
}

<article></article>

БЛОГ НА HUSL

Клонирование элемента и добавление ему аттрибута

Ответы (2 шт):