이벤트 리스너를 이용해서 스타일 변경

    <div class='hello'>
        <h1>go on!</h1>
    </div>
    <button id=bt>버튼</button>
    <script>
        const title = document.querySelector("div.hello:first-child h1");

        function handleTitleClick(){
            title.innerHTML = "back on";
        }

        title.addEventListener("click", handleTitleClick);

    </script>

queySelctor를 이용해서 class 값 가져오기

addEventListenr이용해서 클릭시 함수 실행 시킬 수 있음

 

addEventListenr안에서 실행 시킬 수 있는 함수 정의해주기

 - innerHTML 이용해서 text 변경

 

결과

 

    <div class='hello'>
        <h1>go on!</h1>
    </div>
    <button id=bt>버튼</button>
    <script>
        const title = document.querySelector("div.hello:first-child h1");
        const button = document.getElementById("bt")

        function clickBt(){
            const currentColor = title.style.color;
            let newColor;
            if (currentColor === 'blue'){
                newColor = 'tomato';
            }
            else {
                newColor = 'blue';
            }
            title.style.color = newColor;
        }

        button.addEventListener("click", clickBt);

    </script>

결과