[자바스크립트]다음 질문으로 넘어가기 addeventlistener (+ 자바스크립트에서 클래스 만들어주기 classlist.add)

classlist.add 사용하는 이유, 방법

사용자가 누를 수 있는 answer들은 class나 id 값이 없어서

queryselector가 불가능하므로 js 안에서 클래스 만들어준다.

밑에서 세 번째 줄 ★ : answer.classlist.add('answerlist');

function addAnswer(answerText){
    var a = document.querySelector('.answerbox');
    var answer = document.createElement('button');
    // answer는 클래스나 id값이 없어서 querySelector이용 불가하므로 클래스 만들어주기 
    answer.classList.add('answerlist');
    a.appendChild(answer);
    answer.innerHTML = answerText;

 addEventListener 정의

EventTarget 인터페이스의 addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다. 일반적인 대상은 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체가 대상이 될 수 있습니다.

html onclick

HTML에서는 Button 밑에 onclick이 있어서 버튼을 누르면 함수를 시작하도록 함.

javascript addeventlistener

javascript에서는 button만 createElement 했기 때문에 버튼 누르고 나서의 무언가를 지시 못함.

즉, html의 onclick 역할을 위해 javascript의 addeventlistener 함수 이용

 

 addEventListener 사용하는 방법(ex. js안에서 html의 onclick역할 필요할 때)

  // html의 onclick 역할의 addEventListener
    answer.addEventListener("click", function(){
        // 버튼 하나만 클릭해도 모든 버튼이 사라지도록 함
        var children = document.querySelectorAll('.answerlist');
        for(let i=0; i< children.length; i++){
            children[i].disabled =true;
            children[i].style.display= 'none';
           }
        }, false);   
    }

[코드해석]

-addEventListener("click", function()) :클릭하면 함수값 내놔라

-위에서 answerlist 클래스 만든것을 queryselectorAll로 children 변수로 불러낸다

( 사용자에게 보이는 정답 탭이 3개이므로 3개 모두 선택)

-for함수를 사용해서 i가 0이고, length를 이용해서 children변수가 끝날 때까지 불러낸다

그리고 i는 하나씩 커진다. i++