FrontEnd

[JavaScript] 조건문이용한 토글 기능 만들기 (야간모드)

뚜벅-뚜벅 2021. 2. 17. 19:26

조건문


ex. <input type="button" value="black" onclick="this.value = 'white'">
=> value 값이 "black"인 버튼을 누를 때 "white"로 바뀌는 설정

=> 여기서 조건문을 이용해 누를 때마다 상태가 바뀌는 toggle 기능을 만들 수 있다. 

<body>
<input id='day' type="button" value="black" onclick="change()">
    <script>
        var btn = document.getElementById('day');
        function change(){
            if(btn.value=="black"){
                btn.value= "white";
                document.querySelector('body').style.backgroundColor='black';
            }else{
            btn.value="black";
            document.querySelector('body').style.backgroundColor='white';
        
        }
        }
    </script>
    </body>

*onclick 속성에 함수 쓸 때 () 소괄호를 꼭 넣어야한다.

*onclick 이벤트가 속한 자기자신의 태그를 가리킬 땐 id 따로 지칭하지 않고 this 를 사용할 수 있다.

이러한 명령을 가진 blue, red 버튼도 만든다고 할 때 유용하다. 즉 한번의 함수 선언으로 여러 엘리먼트에서 토글 기능을 수행할 수 있다.