用Javascript点击填充CSS方块

我正在用html、css和javascript制作一个基本的习惯跟踪器原型。有一些红色正方形（填充白色）的轮廓，它们是使用div制作的。然后将这些正方形放置在容器中，以保持相等的间距，即使页面已调整大小

我试图允许用户点击一个正方形来填充它，然后再次点击它来取消填充。当我点击方块时，什么也没发生

我可以预见的另一个问题是，正方形可能无法以我所写的方式单独寻址，我不确定如何解决这个问题，因此，如果有人能给出一些关于如何解决这个问题的建议，那就太好了

下面提供了我的所有代码，但如果有人感兴趣，这里还有一个代码笔链接：

函数FillSquare（）{
document.getElementsByClassName（'eqi-container div'）[0]
.addEventListener（'click'，函数（事件）{
document.body.style.backgroundColor='红色'；
});
}

.eqi容器{
边框：10px纯黑；
显示器：flex；
证明内容：之间的空间；
}
.eqi货柜部{
宽度：50px；
高度：50px；
背景：白色；
边框：10px纯红；
}

方形点击器

函数FillSquare（e）{
e、 classList.toggle（'red'）；
}

.eqi容器{
边框：10px纯黑；
显示器：flex；
证明内容：之间的空间；
}
.eqi货柜部{
宽度：50px；
高度：50px；
背景：白色；
边框：10px纯红；
}
.eqi集装箱分区红色{
背景：红色；
}

函数FillSquare（e）{
e、 classList.toggle（'red'）；
}

.eqi容器{
边框：10px纯黑；
显示器：flex；
证明内容：之间的空间；
}
.eqi货柜部{
宽度：50px；
高度：50px；
背景：白色；
边框：10px纯红；
}
.eqi集装箱分区红色{
背景：红色；
}

---

有很多方法可以做到这一点，但一般来说，您应该考虑使用CSS进行样式设置，使用javascript切换类

例如，在CSS中：

.active-square {
    background: red
}

然后在HTML中，您可以执行以下操作：

<div onclick="this.classList.toggle('active-square')">My Square</div>

我的广场

---

通常，您不会像这样直接使用单击处理程序，而是使用javascript进行设置。但这是一个基本的例子，说明了它是如何工作的。

有很多方法可以做到这一点，但一般来说，您应该考虑使用CSS进行样式设置，使用javascript切换类

例如，在CSS中：

.active-square {
    background: red
}

然后在HTML中，您可以执行以下操作：

<div onclick="this.classList.toggle('active-square')">My Square</div>

我的广场

通常，您不会像这样直接使用单击处理程序，而是使用javascript进行设置。但这是它如何工作的一个基本示例。

$（函数（）{
$（'.eqi container div'）。单击（函数（）{
$（this.toggleClass（'fill'）；
})
})

.eqi容器{
边框：10px纯黑；
显示器：flex；
证明内容：之间的空间；
}
.eqi货柜部{
宽度：50px；
高度：50px；
边框：10px纯红；
}
.填充{
背景：红色；
}

方形点击器

$（函数（）{
$（'.eqi container div'）。单击（函数（）{
$（this.toggleClass（'fill'）；
})
})

.eqi容器{
边框：10px纯黑；
显示器：flex；
证明内容：之间的空间；
}
.eqi货柜部{
宽度：50px；
高度：50px；
边框：10px纯红；
}
.填充{
背景：红色；
}

方形点击器

为什么要将onclick绑定到一个通过单击触发的函数中？这是我第一次深入研究javascript，所以我一直在尝试将我从不同教程和文章中看到的内容拼凑起来。所以我基本上不知道我在做什么。为什么要在一个通过点击触发的函数中绑定onclick？这是我第一次深入研究javascript，所以我一直在尝试将我从不同教程和文章中看到的东西拼凑起来。所以我基本上不知道我在做什么。