为什么querySelector只能选择第一个元素，我该如何解决？

Question

我正在尝试制作一个日历，当我点击其中的一个日期时，会弹出一个表单需要填写。但我无法正确地实现这个功能。只有第一个“1”日期可以正常工作。其他所有日期都无法工作，我不知道该如何修复。我已经尝试重写代码并切换到id，但没有任何解决方法。非常感谢帮助！

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

.bg-modal {
  width: 100%;
  background-color: rgba(0, 0, 0, .7);
  height: 100vh;
  position: fixed;
  z-index: 20;
  display: none;
}

.modal-content {
  width: 30%;
  height: 50%;
  position: absolute;
  top: 50%;
  border-radius: 30px;
  background: linear-gradient(to bottom, #2ad6ff, #0069ff);
}

.modal-heading {
  width: 70%;
  height: 50px;
  position: absolute;
  border-radius: 50px;
  background-color: #2ad6ff;
  left: 50%;
  transform: translate(-50%);
  top: -6%;
  font-size: 32px;
  text-align: center;
  color: white;
}

.modal-close {
  position: absolute;
  transform: rotate(45deg);
  font-size: 42px;
  color: white;
  top: -1%;
  left: 95%;
  ;
  cursor: pointer;
  height: 10%;
}

.modal-input {
  height: 70%;
  border: none;
  outline: none;
  border-radius: 20px;
  padding-left: 15px;
  font-size: 15px;
  margin-right: 32px;
}

.modal-textarea {
  margin: 20px;
  height: 150px;
  border-radius: 20px;
  border: none;
  resize: none;
  font-size: 15px;
  padding-left: 3%;
  padding-top: 2%;
}

.modal-submit {
  width: 30%;
  position: absolute;
  left: 47%;
  top: 85%;
  transform: translateX(-50%);
  background-color: white;
  outline: none;
  border: none;
  font-size: 30px;
  border-radius: 20px;
  color: black;
}

.modal-submit:active {
  top: 86%;
}

.modal-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

.calander {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: stretch;
  width: 40%;
  height: 50%;
  font-size: 32px;
  text-align: center;
  left: 50%;
  position: absolute;
  transform: translate(-50%);
}

.weekend {
  font-size: 45px;
}

.weekdays {
  font-weight: 200;
  transition: .5s;
  background: none;
  border: none;
  font-size: 40px;
}

.weekdays:hover {
  transform: scale(1.3);
  transition: .5s;
}

<div class="bg-modal">
  <div class="modal-content center">
    <div class="modal-heading">Complete the form below</div>
    <form class="modal-form" action="">
      <input class="modal-input" type="text" placeholder="Name">
      <input class="modal-input" type="text" placeholder="Email">
      <input class="modal-input" type="text" placeholder="Phone Number">
      <input class="modal-input" type="text" placeholder="Company Name">
      <textarea class="modal-textarea" placeholder="What can we help you with?"></textarea>
      <input class="modal-submit" type="submit">
    </form>
    <div class="modal-close">+</div>
  </div>
</div>


<div class="calander">
  <div class="weekend">S</div>
  <div class="weekend">M</div>
  <div class="weekend">T</div>
  <div class="weekend">W</div>
  <div class="weekend">T</div>
  <div class="weekend">F</div>
  <div class="weekend">S</div>
  <div></div>
  <div></div>
  <button type="button" class="weekdays"><div class="weekdays">1</div></button>
  <button type="button" class="weekdays"><div class="weekdays">2</div></button>
  <button type="button" class="weekdays"><div class="weekdays">2</div></button>
  <button type="button" class="weekdays"><div class="weekdays">3</div></button>
  <button type="button" class="weekdays"><div class="weekdays">4</div></button>
  <button type="button" class="weekdays"><div class="weekdays">5</div></button>
  <button type="button" class="weekdays"><div class="weekdays">6</div></button>
  <button type="button" class="weekdays"><div class="weekdays">7</div></button>
  <button type="button" class="weekdays"><div class="weekdays">8</div></button>
  <button type="button" class="weekdays"><div class="weekdays">9</div></button>
  <button type="button" class="weekdays"><div class="weekdays">10</div></button>
  <button type="button" class="weekdays"><div class="weekdays">11</div></button>
  <button type="button" class="weekdays"><div class="weekdays">12</div></button>
  <button type="button" class="weekdays"><div class="weekdays">13</div></button>
  <button type="button" class="weekdays"><div class="weekdays">14</div></button>
  <button type="button" class="weekdays"><div class="weekdays">15</div></button>
  <button type="button" class="weekdays"><div class="weekdays">16</div></button>
  <button type="button" class="weekdays"><div class="weekdays">17</div></button>
  <button type="button" class="weekdays"><div class="weekdays">18</div></button>
  <button type="button" class="weekdays"><div class="weekdays">19</div></button>
  <button type="button" class="weekdays"><div class="weekdays">20</div></button>
  <button type="button" class="weekdays"><div class="weekdays">21</div></button>
  <button type="button" class="weekdays"><div class="weekdays">22</div></button>
  <button type="button" class="weekdays"><div class="weekdays">23</div></button>
  <button type="button" class="weekdays"><div class="weekdays">24</div></button>
  <button type="button" class="weekdays"><div class="weekdays">25</div></button>
  <button type="button" class="weekdays"><div class="weekdays">26</div></button>
  <button type="button" class="weekdays"><div class="weekdays">27</div></button>
  <button type="button" class="weekdays"><div class="weekdays">28</div></button>
  <button type="button" class="weekdays"><div class="weekdays">29</div></button>
  <button type="button" class="weekdays"><div class="weekdays">30</div></button>
  <button type="button" class="weekdays"><div class="weekdays">31</div></button>

</div>

https://codepen.io/pokyparachute66/pen/vPyrEv

- Bob Higgins

---

因为这就是 querySelector 的字面意思。如果你想要所有匹配的元素，使用 querySelectorAll。 - Heretic Monkey

请参考 querySelectorAll 和 getElementsBy* 方法返回什么？。 - Heretic Monkey

Answer 1

使用querySelectorAll代替，它将返回一个节点列表。然后您需要迭代它们并附加事件处理程序。

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

- Sushanth --

Answer 2

Use querySelectorAll and forEach:

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

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

最初的回答：querySelector返回第一个匹配的元素，而querySelectorAll返回所有匹配的元素。

- Alex

Answer 3

如果您想访问所有的Class，您必须使用querySelectorAll方法。这是在文档中正确地使用类和Javascript的方法: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll 之后，您只需使用一个forin循环来解析它。

- Samuel Simonney

---

尝试在您的答案中包含实际代码，而不是代码链接。链接可能会更改，因此变得无用。 - Blundering Philosopher

Answer 4

因为querySelector()：

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

如果你想获取多个节点，请使用querySelectorAll()。它返回一个NodeList（可以像普通数组一样进行迭代）。

- Krzysztof Dziembała