ClassList.add()오류

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

글쓴이

글
2022년 5월 10일 13:59 #33616

유지나
참가자

안녕하세요. 코딩애플님 html, css,javascript강의 에서 배운 지식을 토대로 배열값에 맞추어 class를 추가하는 코드를 작성해보았습니다.

1이면 pk_full클래스 추가, 0이면 pk_empty클래스 추가, 특정공간만 특정클래스 설정하는 코드입니다.

이 코드중에서 java script 의 classList.add()함수들이 작동을 하지 않습니다.

오류창에는: Uncaught TypeError: Cannot read properties of null (reading 'classList') 다음과 같은 오류가 뜹니다.

어떻게 해결하면 좋을까요?

<html>
<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>

<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>
</html>

pklot.css

.headline{ /*제목 설정*/
color:white;
font-size: 60px;
text-align: center;
background-color: #6b9080;
width:80%;
border-radius: 7px;
font:"nanumsquare";
/*위치 설정*/
display: block;
margin-left:auto;
margin-right: auto;
margin-bottom: 10px;
}

.sub_head{ /*위치선택, 잔여자리 안내*/
margin:5px;
margin-left:50px;
}

.pklot_selection_position{ /*위치선택 속성*/
display: block;
/* margin-left:0; */
float:left;
width:200px;
height:30px;
margin-top:5px;
}
table{ /*위치 선택 속성*/
border: 0.5px solid #6b9080;
}
option{/*위치 선택 속성*/
font-size: 20px;
background-color: #f6fff8;
}

.pklot_round{
background-color: #cce3de;
border-radius: 20px;
clear:both;
margin-top:10px;
width:90%;
display:block;
margin-left:auto;
margin-right:auto;
padding:10px;
overflow: auto;
/* display:flex;
flex-direction: row; */

}
.construct{
width:95%;
height:340px;
background-color:#cca63d;
border-radius:15px;
text-align:center;
vertical-align: middle;
}

.empty_area{
/* border-color: blue;
border: solid 0.5px; */
height:20%;
width:70%;
float:left;
}

.pklot_zone123{

display:flex;
flex-direction:row;
width:100%;
float:left;
}
.pklot_zone4{
/* border-color: blue;
border: solid 1px; */
/* padding-left:5px; */
display:flex;
flex-direction:column;
/* justify-content: space-between; */
float:right;
width:15%;
}

.pklot_zone{

/* border-color: black;
border: solid 0.5px; */
float:left;
display:flex;
flex-direction:column;
justify-content: space-around;
width:20%;

}

.flex-item{

margin: 5px;
border-radius: 5px;
width:90%;
height: 60px;
text-align: center;
}
.pk_full{ /*주차장 주차여부표시*/
background-color: #fe6d73;
}
.pk_empty{/*주차장 주차여부표시*/
background-color: #57cc99;
}
.pk_help{/*주차장 주차여부표시*/
background-color: #227c9d;
}
.pk_pregnant{/*주차장 주차여부표시*/
background-color: #95229d;
}
.pk_not{
background-color: #cce3de;
}

@font-face {
font-family:"nanum-square";
font-weight :800;
src:url(../NanumSquare-master/NanumSquareR.ttf);
/*글씨체 설정*/
}
div, tr, td, option,h2 {
transform: rotate(0.03deg);
/* 글자를 부드럽게 보이게 해줌 */
}

2022년 5월 10일 20:26 #33637

codingapple
키 마스터

cc안에 데이터가 65개밖에 없는데

document.getElementById('i+1').classList.add('pk_empty');

이런거 써서 그런게 아닐까요
글쓴이

글

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

답변은 로그인 후 가능합니다.

로그인

ClassList.add()오류

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png