javascript에서 onclick버튼이 한번만 작동하는 이유가 무엇일까요??


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;
    }
}

  • 2017년 11월 06일에 작성됨

조회수 89


1 답변


getAttribute 함수는 "현재" Attribute를 가져오는 함수입니다. 즉, 아래에서 setAttribute를 호출해도 attr 변수의 값은 바뀌지 않죠.

덧붙이자면 이런 함수도 있어요.

gnb.classList.toggle('active')

gnb.classList.add('active')
gnb.classList.remove('active')

미리보기

https://codepen.io/RedPumpkin/details/JORoMY/


로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close