매일 매일 미라클 코딩

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

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 버튼도 만든다고 할 때 유용하다. 즉 한번의 함수 선언으로 여러 엘리먼트에서 토글 기능을 수행할 수 있다. 

'FrontEnd' 카테고리의 다른 글

jQuery datePicker - 선택가능한 날짜 범위지정하기 (오늘 이전날짜 막기, min/maxDate 설정)  (0) 2021.04.15
[JavaScript, jQuery] datepicker 에서 특정 기간 비활성화 하기  (0) 2021.03.26
[JavaScript] (조금은 뻔뻔한) 자바스크립트 함수와 객체  (0) 2021.02.17
[JavaScript] 엘리먼트에 접근하기 (배열&반복문)  (0) 2021.02.17
JavaScript와 DOM/BOM  (0) 2021.02.13
'FrontEnd' Related Articles more