Javascript 如何将一类div从上到下移动？

我想要的是使用setInterval（）函数将类为“goccia”的所有div一起从上到下移动

我不明白为什么它只移动第一个元素（.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);

var campo=document.querySelector（“#campo”）；
var-marginTop=0；
函数creaGocce（）{
var numeroGocce=document.querySelector（'input'）。值；
对于（变量i=0；i

我想您正在尝试将创建的每个div向下发送到底部

您应该使用css属性“position:absolute”和“top:0px”并将其应用于campo（div的容器）或创建一个新容器。这会更容易

我建议您检查并尝试每个参数以了解它

---

继续编码

方法

querySelector（）

返回文档中与指定选择器或选择器组匹配的第一个元素。你要找的是

queryselectoral（）

使用该选择器选择所有元素。非常感谢，我知道这一点，但我没有想到。对此我很抱歉。谢谢，老兄，我为这个愚蠢的问题道歉，但我被困在里面太久了，而且我越来越没动力了。别担心，我每天都会问我的同事很多愚蠢的问题。学习编程的方法是一次又一次地失败，直到你达到目标，然后接受新的挑战。如果你对这方面完全不熟悉，试着在学校或学院上一门课程