Javascript:이벤트 편집하기 (부분)

===더하고 빼고, 변형하고===
add 어떤 값을 더한다. remove 어떤 것을 뺀다. toggle 어떤 게 있으면 빼고, 없으면 더한다.
{| class="wikitable"
!의도
!설명
!방법
|-
|클릭되면 나타나게
|클래스를 하나 더 추가하는 방법으로 2중 클래스를 부여한다.



CSS를 만들어두고 JavaScript에서 컨트롤하는 방식을 쓴다.

해당 버튼을 클릭하면 함수에서 
|CSS형태<syntaxhighlight lang="css">
.클래스명{
    display: none;
}

.클래스명.on{
    display: block;
}
</syntaxhighlight>JavaScript형태<syntaxhighlight lang="javascript">
const 변수 = document.querySelector('.클래스명');
const 변수2 = document.querySelector('.클래스명.on');


function 함수명(){
    //변수.classList.add('on');  //해당 클래스에 on이라는 클래스를 추가한다.
    //this.classList.add('on');  //위처럼 쓸 수도 있지만, 현재 클릭한 것에 적용한다는 의미의 this가 상당히 잘 쓰인다.
    this.classList.toggle('on');  //위처럼 쓰고, 아래의 함수와 연계해 쓸 수도 있지만, on이 있으면 빼고, on이 없으면 더하는 기능이 있다.
}

// function 함수명2(){
//     this.classList.remove('on');
// }

변수.addEventListener('click', 함수명)
//변수2.addEventListener('click', 함수명2)

</syntaxhighlight>
|}