javascript에서 onclick버튼이 한번만 작동하는 이유가 무엇일까요??
조회수 1897회
class속성을 이용해서 버튼을 누르면 메뉴바가 나타나고 사라지는 연습문제를 풀어보았는데 버튼을 누르면 처음에는 동작하는데 다음에는 동작하지 않습니다ㅠ 무엇이 문제일까요ㅠㅠ
코드입니다▼
<!DOCTYPE html> Page 3D
header{
width: 600px;
height: 190px;
border: 1px solid #ccc;
background: #ccc;
}
#toggle{
position: absolute;
left: 400px;
top: 90px;
outline: none;
background: #666;
color: white;
font-size: 20px;
padding: 0 5px;
text-decoration: none;
}
#toggle:hover{text-decoration: underline; }
#gnb.active{
height: 190px;
}
#gnb{
width: 200px;
height: 0px;
overflow: hidden;
border-bottom: 1px solid #666;
border-top: 1px solid #ccc;
box-sizing: border-box;
transition-duration: 0.5s;
}
</style>
app title toggle
<nav class="active" id="gnb">
<div><a href="#" class="menu">Home</a></div>
<div><a href="#" class="menu">Profolio</a></div>
<div><a href="#"class="menu">Contact</a></div>
</nav>
var toggle = document.getElementById('toggle');
var gnb = document.getElementById('gnb');
var attr = gnb.getAttribute('class');
toggle.onclick = function(){
if (attr == 'active'){
gnb.removeAttribute('class');
return false;
}else{
gnb.setAttribute('class','active');
return false;
}
}
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
getAttribute 함수는 "현재" Attribute를 가져오는 함수입니다. 즉, 아래에서 setAttribute를 호출해도 attr 변수의 값은 바뀌지 않죠.
덧붙이자면 이런 함수도 있어요.
gnb.classList.toggle('active') gnb.classList.add('active') gnb.classList.remove('active')미리보기
-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력