Bagaimana untuk menyelesaikan masalah querySelector hanya memilih elemen pertama?

Question

Saya cuba membuat kalendar dan apabila saya klik pada salah satu tarikh satu borang muncul yang perlu anda isi. Saya tidak boleh mendapatkannya untuk bekerja. Satu-satunya masa saya masuk kerja adalah pada tarikh "1" pertama. Semua yang lain tidak berfungsi dan saya tidak tahu bagaimana untuk membetulkannya. Saya cuba menulis semula kod dan bertukar kepada id tetapi tiada apa yang berjaya. Sebarang bantuan amat dihargai. Terima kasih!

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

Gunakan querySelectorAll dan untukSetiap:

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

querySelector hanya mengembalikan elemen padanan pertama, querySelectorAll mengembalikan semua elemen padanan.

Answer 2

Gunakan querySelectorAll Sebaliknya, ia akan mengembalikan senarai nod. Kemudian anda perlu mengulang dan melampirkan pengendali acara.

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