Javascript 为什么querySelector只选择第一个元素，我如何解决这个问题？

我正在尝试制作一个日历，当我点击其中一个日期时，会弹出一个表格，你必须填写。我不能让它正常工作。我唯一能去上班的就是第一次“1”约会。其他一切都不起作用，我不知道如何修复它。我已经尝试过重写代码并切换到id，但没有任何效果。感谢您的帮助。谢谢

document.querySelector（“.weekdays”）.addEventListener（“单击”，
函数（）{
document.querySelector（“.bg modal”）.style.display=“flex”；
});
.bg模式{
宽度：100%；
背景色：rgba（0,0,0,7）；
高度：100vh；
位置：固定；
z指数：20；
显示：无；
}
.模态内容{
宽度：30%；
身高：50%；
位置：绝对位置；
最高：50%；
边界半径：30px；
背景：线性梯度（至底部，#2ad6ff，#0069ff）；
}
.模态标题{
宽度：70%；
高度：50px；
位置：绝对位置；
边界半径：50px；
背景色：#2ad6ff；
左：50%；
转换：翻译（-50%）；
前-6%；
字体大小：32px；
文本对齐：居中；
颜色：白色；
}
.模式关闭{
位置：绝对位置；
变换：旋转（45度）；
字体大小：42px；
颜色：白色；
前-1%；
左：95%；
;
光标：指针；
身高：10%；
}
.模态输入{
身高：70%；
边界：无；
大纲：无；
边界半径：20px；
左侧填充：15px；
字体大小：15px；
右边距：32px；
}
.模态文本区{
利润率：20px；
高度：150像素；
边界半径：20px；
边界：无；
调整大小：无；
字体大小：15px；
左：3%；
垫面：2%；
}
.模式提交{
宽度：30%；
位置：绝对位置；
左：47%；
最高：85%；
转化：translateX（-50%）；
背景色：白色；
大纲：无；
边界：无；
字体大小：30px；
边界半径：20px；
颜色：黑色；
}
.模式提交：活动{
最高：86%；
}
.情态形式{
显示：网格；
网格模板列：1fr；
网格模板行：1fr 1fr 1fr 1fr；
}
卡兰德先生{
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
网格模板行：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
栅柱间隙：20px；
网格行间距：20px；
调整项目：拉伸；
对齐项目：拉伸；
宽度：40%；
身高：50%；
字体大小：32px；
文本对齐：居中；
左：50%；
位置：绝对位置；
转换：翻译（-50%）；
}
.周末{
字体大小：45px；
}
.平日{
字号：200；
过渡：.5s；
背景：无；
边界：无；
字体大小：40px；
}
.工作日：悬停{
转换：比例（1.3）；
过渡：.5s；
}

填写下表
+
s
M
T
W
T
F
s
1.
2.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
如果要访问所有类，必须使用querySelectorAll。
这是在文档中使用类和Javascript的正确方法：
在此之后，您只需使用forin来解析它。
使用和forEach：

 document.querySelectorAll('.weekdays').forEach(e => e.addEventListener('click', listener)):

querySelector只返回第一个匹配的元素，querySelector返回所有匹配的元素。
因为：

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

如果要获得多个节点，请使用。它返回一个
NodeList
（它可以像普通数组一样进行迭代）。
使用它将返回一个节点列表。然后，您必须迭代并附加事件处理程序

document.querySelectorAll(".weekdays").forEach(elem => elem.addEventListener("click",
 () => {
    document.querySelector(".bg-modal").style.display = "flex";
  }));

因为这就是我们定义要做的。如果需要所有匹配的元素，请使用。请参阅，并尝试在答案中包含实际代码，而不是代码链接。链接可能会更改，因此会中断并变得无用