<script>
function nightdayhandler(){
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
</script>
</head>
<body>
<input id="night_day" type="button" value="night" onclick="
nightdayhandler();
">
<script>
function nightdayhandler(){
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
</script>
</head>
<body>
<input id="night_day" type="button" value="night" onclick="
nightdayhandler();
">
버튼이 night에서 day로 바뀌지 않는다. 왜냐하면 this 는 onclick이라는 이벤트에 소속되어있는 태그 ( <input id="night_day" type="button" value="night" onclick="
nightdayhandler();
"> ) 를 가르키도록 약속되어있는데, 독립된 함수 nightdayhandler(){를 쓰게되면 그 이후로 this는 더이상 인풋 버튼이 아니라 night 객체를 가르키게 된다. (웹브라우저에서는 윈도우가 된다.)
그렇다면, this의 값을 인풋을 가르키게 하기 위해서 nightdayhandler(){ 에 this를 넣어주고 위의 function nightdayhandler(this) 매개변수의 이름을 this에서 self로 바꿔주고 밑에 종속된 나머지 this 또한 다 self로 바꿔준다.
<script>
function nightdayhandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
</script>
</head>
<body>
<input id="night_day" type="button" value="night" onclick="
nightdayhandler(this);
"> <script>
function nightdayhandler(self){ this 에서 self로 바꿔준다.
var target = document.querySelector('body');
if(self.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
</script>
</head>
<body>
<input id="night_day" type="button" value="night" onclick="
nightdayhandler(this); : this를 넣어준다.
">
버튼이 다시 night에서 day로 바뀐다.
'cording > 생활코딩' 카테고리의 다른 글
| [Java Script] 객체프로퍼티와 메소드 (0) | 2022.03.14 |
|---|---|
| [Java Script] 객체생성, 반복문 (0) | 2022.03.14 |
| [Java Script] 함수 return (0) | 2022.03.11 |
| [Java Script] 함수 Parameter, Argument, (0) | 2022.03.10 |
| [Java Script] 배열과 반복문의 활용 (0) | 2022.03.09 |
