我正在尝试制作一个日历,当我点击其中的一个日期时,会弹出一个表单需要填写。但我无法正确地实现这个功能。只有第一个“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>
querySelector
的字面意思。如果你想要所有匹配的元素,使用querySelectorAll
。 - Heretic Monkey