[Java Script] 리팩토링 중복의 제거
<input id="night_day2" type="button" value="night" onclick="
if(document.querySelector('#night_day2').value === 'night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#night_day2').value = 'day';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#night_day2').value = 'night';
}
">
나중에 중복하게 되면 작동이 안되어서 #night_day2로 적용해주었다. 작동이 잘되지만
이게 더 많은 중복이 있다면 일일히 번호 수정을 해야하는 번거로움이 있다.
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
}
">
<h2>Hello world</h2>
</body>
</html>
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="night" onclick="
var target = document.querySelector('body'); : var (변수선언) target 을 body로 설정
if(this.value === 'night'){ : document.querySelector('#night_day')를 this로 설정 따라서 id 값은 필요하지않다.
target.style.backgroundColor = 'black'; : target으로 대체
target.style.color = 'white';
this.value = 'day';
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
}
">
<h2>Hello world</h2>
</body>
</html>
* 반복되는것을 줄이는 연습을 해보자