如何解決 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

Answer 1

使用querySelectorAll 和 forEach：

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

querySelector 只傳回第一個符合的元素，querySelectorAll 傳回所有符合的元素。

Answer 2

使用querySelectorAll 相反，它會傳回一個節點清單。然後，您必須迭代並附加事件處理程序。

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