728x90
웹프로그래밍 시험 준비를 하다가, 특정 행을 클릭했을 때, 그 아래에 숨겨져 있던 행이 나타나게 하는 기능을 구현했다.
근데 첫 번째 클릭에서는 그 행이 나타나지 않았고, 두 번째 클릭부터 나타나는 문제가 있었다.
기존 코드
<html>
<head>
<style>
.info {
visibility: collapse;
background-color: rgb(237, 237, 237);
font-style: italic;
color: rgb(65, 65, 65);
}
</style>
</head>
<body>
<table border="1">
<tr class="movie">
<td class="num">1</td>
<td class="title">인터스텔라</td>
<td class="genre">SF</td>
<td class="grade">9.0</td>
</tr>
<tr class="info">
<td colspan="4" class="text">title 선택됨 - 장르: genre / 평점: grade</td>
</tr>
</table>
<script>
let movies = document.getElementsByClassName("movie");
let infos = document.getElementsByClassName("info");
for (let i = 0; i < movies.length; i++) {
movies[i].addEventListener("click", () => change_info(i));
}
function change_info(indx) {
if (infos[indx].style.visibility === "collapse") { // 보이기
infos[indx].style.visibility = "visible";
}
else { // 감추기
infos[indx].style.visibility = "collapse";
}
}
</script>
</body>
</html>
만약 infos[indx]의 visibility가 collapse라면, visible로 바꾸는 것이다.
css를 보면 초기 설정이 collapse이므로, 생각대로라면 "collapse"==="collapse"가 되어 동작해야했다.
하지만 맨 처음 클릭했을 때는 동작하지 않았다.
그 원인은 style.visibility는 html의 속성에서만 읽을 수 있기 때문이었다.
즉, <style> 태그 안에 있는 내용은 읽어오지 못하므로 맨 처음 로드되었을 때는 ""==="collapse"의 형태로 되어있는 것이다.
그래서 첫 클릭 때는 if 조건이 false가 되므로 else문이 실행되어 다시 collapse가 되는 것이다.
해결 방법은 두 조건을 바꿔주면 된다.
기존의 조건은 현 상태가 collapse인지 확인했는데, visible인지 확인하는 조건으로 변경하고 실행 내용도 바꿔주면 된다.
그러면 첫 클릭은 무조건 false이므로 else문이 실행되고, else문에는 visible로 바꾸는 코드가 있어서 info행이 나타난다.
수정된 코드
<html>
<body>
<script>
function change_info(indx) {
if (infos[indx].style.visibility === "visible") { // 감추기
infos[indx].style.visibility = "collapse";
}
else { // 보이기
infos[indx].style.visibility = "visible";
}
}
</script>
</body>
</html>728x90
반응형
'Development > Web(HTML, CSS, JS)' 카테고리의 다른 글
| body 전역 속성, 본문 내부 태그 (2) | 2026.04.17 |
|---|---|
| HTML 태그, head (0) | 2026.04.17 |
