night/day button Refactoring

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

onclick과 같은 이벤트 안에서 실행되는 코드에서는

현재 코드가 속해 있는 태그를 가리키도록 약속돼 있는 특수한 키워드를 사용한다. -> this 키워드

 

변수 사용 var target = document.querySelector('body');

 

 

↓ refectoring

 

<input type="button" value="change to night" onclick="
    var target = document.querySelector('body');
    if(this.value === 'change to night') {
        target.style.backgroundColor='black';
        target.style.color='white';
        this.value = 'change to day';
    } else {
        target.style.backgroundColor='white';
        target.style.color='black';
        this.value = 'change to night'; 
    }
">