Toggle이란? (html, Javascript)

toggle에 대한 예시

오늘 실행해본 실습으로 예를 들면, night/day버튼을 하나로 통합해서 만드는 것.

night상태의 버튼을 클릭하면, <배경 검정, 글씨 하양, 버튼 내 글자(value) day>로 바뀌고
day상태의 버튼 클릭하면, <배경 하양, 글씨 검정, 버튼 내 글자 night>로 바뀌는 기능을 지정한 html 코드가
바로 아래 예시!

<input id="night_day" type="button" value="night" onclick="
      if(document.querySelector('#night_day').value === 'night'){
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
        document.querySelector('#night_day').value ='day';
      } else {
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        document.querySelector('#night_day').value = 'night';
      }
      ">

토글이란?

클릭이벤트와 선택된 element 사이에 둘 또는 그 이상의 기능을 부여하는 방식이다.
한 번 클릭하면, 첫 번째로 지정된 기능이 작둉하고, 다시 클릭하면, 두 번째 기능이 작동한다.
출처: w3schools jQuery toggle method

jQuery toggle() Method