[자바스크립트] 하나의 버튼으로 day / night 배경컬러 바꾸기

 

 

 

    <input type="button" value="night" class="dayNightButton">

    <script>
        let dayNightButton = document.querySelector(".dayNightButton");
        let bodyStyle = document.querySelector('body').style;

        dayNightButton.addEventListener("click", change);

    
        function change() {
            if (dayNightButton.value === "night") {
                bodyStyle.backgroundColor = "black";
                dayNightButton.value = "day";
            } else {
                bodyStyle.backgroundColor = "white";
                dayNightButton.value = "night";
            }
        }
    </script>

함수 안에 조건문을 넣고, 그 안에 .value를 통해서 button의 value 값을 바꿔줬다.

덕분에 버튼 하나를 눌렀을 때, 다른 효과를 나타낼 수 있었다.

backgroundColor도 중복되기 때문에 변수로 넣어도 될 것 같지만?

혹시라도 text를 추가할 시, 그 부분은 변경될 수도 있으니 그대로 두었다.

 

 

 

밤으로 가는 버튼

 

 

낮으로 가는 버튼

 

 

생활코딩 JavaScript 강의 참고