[JS] 16. 함수의 활용

<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>

그리고 input태그에는 위의 함수를 적습니다.

  <input type="button" value="night" onclick="
  nightDayHandler();
  ">

그리고 결과를 확인해보니? 뭔가 이상합니다.

바뀌는것 같긴한데, night도 day로 안바뀌네요!!

왜 그럴까요?

문제는 작성된 함수에서 사용된 this가 함수 안에서만 사용되고 input에서는 사용될 수 없기때문입니다. 사용되는 범위가 다른거죠.

그래서 아래와 같이 수정이 필요합니다.

일단 먼저 input 태그에 this값을 인자값으로 넣어줍니다.

이렇게요.

  <input type="button" value="night" onclick="
  nightDayHandler(this);
  ">

그리고 함수에서 사용되는 매개변수를 self로 작성합니다.

input태그에서 this값이 함수에서 매개변수 self로 적용되는겁니다.

그리고 nightDayHandler 함수의 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>

그리고 결과를 볼까요?

네, 아래와 같이 정상적으로 바뀌는걸 확인할 수 있습니다.