Wie kann das Problem gelöst werden, dass querySelector nur das erste Element auswählt?
Ich versuche einen Kalender zu erstellen und wenn ich auf einen der Termine klicke, erscheint ein Formular, das du ausfüllen musst. Ich kann es nicht zum Laufen bringen. Das einzige Mal, dass ich zur Arbeit kam, war beim ersten „1“-Date. Alles andere funktioniert nicht und ich weiß nicht, wie ich es beheben kann. Ich habe versucht, den Code neu zu schreiben und auf id umzusteigen, aber nichts hat funktioniert. Jede Hilfe wird geschätzt. Danke!
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
