Как я могу переместить класс div сверху вниз? - PullRequest
0 голосов
/ 25 февраля 2020

Я хочу переместить все элементы div с классом "goccia" вместе сверху вниз, используя функцию setInterval ().

Я не могу понять, почему он перемещает только первый элемент (.goccia)

Вот мой код JavaScript.

var campo = document.querySelector('#campo');
var marginTop = 0;

function creaGocce(){
    var numeroGocce = document.querySelector('input').value;
    for (var i = 0; i < numeroGocce; i++) {
       campo.innerHTML += ' <div class = "divGoccia"> <div class = "goccia"> 
    </div> </div>';
    }
}
function scompari(){
    document.querySelector('.contenitore').style.display = 'none';
}
function spostaGocce(){
    var goccia = document.querySelector('.goccia');
    goccia.style.marginTop = marginTop + "px";
    marginTop += 10;
}
function muoviti(){
    scompari();
    creaGocce();
    setInterval(spostaGocce, 1000);
}
document.querySelector('button').addEventListener('click', muoviti);

1 Ответ

0 голосов
/ 25 февраля 2020

Полагаю, вы пытаетесь отправить вниз каждый из созданных вами div'ов.

Вам следует использовать атрибут css "position: absolute" и "top: 0px" и применить его к campo (контейнер div) или создайте новый контейнер. Это будет проще.

Я бы порекомендовал вам проверить эту статью W3Schools и попробовать каждый параметр, чтобы узнать его.

Продолжайте кодировать!

...