javascript에서 classList.add() 오류
글쓴이: 익명 사용자 / 작성시간: 화, 2022/05/10 - 3:52오전
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>ParkingLot Information</title> <link href="css/pklot.css" rel="stylesheet"> </head> <body style="background-color:#f6fff8"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script> <h2 class="headline">OOOO대학교 <br>OOOOO 주차장</h2> <nav class="sub_head"> <div> <table> <tr> <td colspan="2" style="text-align:center; background-color:#cce3de;font-weight: 900;">주차가능한 빈자리</td> </tr> <tr> <td>주차완료 된 자리</td> <td id="fulls">4</td> </tr> <tr> <td>주차가능한 빈 자리</td> <td id="emptys">4</td> </tr> <tr> <td>장애인 전용 빈 자리</td> <td id="helpEmpty">2</td> </tr> <tr> <td>임산부 전용 빈 자리</td> <td id="pregnant">2</td> </tr> <tr> <td>총 주차가능 대 수</td> <td>65</td> </tr> </table> </div> <div class="pklot_round"> <div style="float:left; width:80%"> <div style="width:100%"> <div> <p class="construct"></p> </div> <div> <p style="width:95%; height:40px;"></p> </div> </div> <div class="pklot_zone123"> <div class="pklot_zone"> <div id="1" class="flex-item ">1</div> <div id="2"class="flex-item ">2</div> <div id="3"class="flex-item ">3</div> <div id="4"class="flex-item ">4</div> <div id="5"class="flex-item ">5</div> <div id="6"class="flex-item ">6</div> <div id="7"class="flex-item ">7</div> <div id="8"class="flex-item ">8</div> <div id="9"class="flex-item ">9</div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not">입구</div> </div> <div class="pklot_zone"> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not">▼</div> <div class="flex-item pk_not">▼</div> <div class="flex-item pk_not">▼</div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> </div> <div class="pklot_zone"> <div id="10"class="flex-item ">10</div> <div id="11"class="flex-item ">11</div> <div id="12"class="flex-item ">12</div> <div id="13"class="flex-item ">13</div> <div id="14"class="flex-item ">14</div> <div id="15"class="flex-item ">15</div> <div id="16"class="flex-item ">16</div> <div id="17"class="flex-item ">17</div> <div id="18"class="flex-item ">18</div> <div id="19"class="flex-item ">19</div> <div id="20"class="flex-item ">20</div> <div id="21"class="flex-item ">21</div> <div id="22"class="flex-item ">22</div> <div id="23"class="flex-item ">23</div> <div id="24"class="flex-item ">24</div> <div id="25"class="flex-item ">25</div> <div class="flex-item pk_not">▶</div> <div class="flex-item pk_not">▶</div> </div> <div class="pklot_zone" > <div id="26"class="flex-item ">26</div> <div id="27"class="flex-item ">27</div> <div id="28"class="flex-item ">28</div> <div id="29"class="flex-item ">29</div> <div id="30"class="flex-item ">30</div> <div id="31"class="flex-item ">31</div> <div id="32"class="flex-item ">32</div> <div id="33"class="flex-item ">33</div> <div id="34"class="flex-item ">34</div> <div id="35"class="flex-item ">35</div> <div id="36"class="flex-item ">36</div> <div id="37"class="flex-item ">37</div> <div id="38"class="flex-item ">38</div> <div id="39"class="flex-item ">39</div> <div id="40"class="flex-item ">40</div> <div id="41"class="flex-item ">41</div> <div class="flex-item pk_not">▶</div> <div class="flex-item pk_not">▶</div> </div> <div class="pklot_zone"> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not">▲</div> <div class="flex-item pk_not">▲</div> <div class="flex-item pk_not">▲</div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> <div class="flex-item pk_not"></div> </div> </div> </div> <nav class="pklot_zone4"> <div id="42"class="flex-item ">42</div> <div id="43"class="flex-item ">43</div> <div id="44"class="flex-item ">44</div> <div id="45"class="flex-item ">45</div> <div id="46"class="flex-item ">46</div> <div id="47"class="flex-item ">47</div> <div id="48"class="flex-item ">48</div> <div id="49"class="flex-item ">49</div> <div id="50"class="flex-item ">50</div> <div id="51"class="flex-item ">51</div> <div id="52"class="flex-item ">52</div> <div id="53"class="flex-item ">53</div> <div id="54"class="flex-item ">54</div> <div id="55"class="flex-item ">55</div> <div id="56"class="flex-item ">56</div> <div id="57"class="flex-item ">57</div> <div id="58"class="flex-item ">58</div> <div class="flex-item pk_not"></div> <div id="59"class="flex-item ">59</div> <div id="60"class="flex-item ">60</div> <div id="61"class="flex-item ">61</div> <div id="62"class="flex-item ">62</div> <div id="63"class="flex-item ">63</div> <div id="64"class="flex-item ">64</div> <div id="65"class="flex-item ">65</div> </nav> </div> <script> var cc=[1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1]; var emptys=0; var fulls=0; var helps=3; var preg=1; for(var i=0; i<65; i++){ if(cc[i]==0){ if(cc[8]==0){ --helps; document.getElementById('9').classList.add('pk_help'); } if(cc[24]==0){ --helps; document.getElementById('25').classList.add('pk_help'); } if(cc[45]==0){ --helps; document.getElementById('46').classList.add('pk_help'); } if(cc[40]==0){ --preg; document.getElementById('41').classList.add('pk_pregnant'); } if(i!=8 && i!=24 && i!=45 && i!=40){ document.getElementById('i+1').classList.add('pk_empty'); } emptys+=1; } else if(cc[i]==1){ document.getElementById('i+1').classList.add('pk_full'); fulls+=1; } } document.getElementById('emptys').innerHTML=emptys-helps-preg; document.getElementById('fulls').innerHTML=fulls; document.getElementById('helpEmpty').innerHTML=helps; document.getElementById('pregnant').innerHTML=preg; </script> </body>
Forums:
댓글 달기