반복문 적용

반복문을 내가 만든 input 버튼에 적용을 해보는 방법을 배웠다.

 

추가된 기능은 이렇다

1. 링크가 걸린 텍스트들이 야간모드에서는 powderblue 라는 색으로 바뀔 수 있도록

2, 주간모드에서는 그냥 검정색으로

 

코드는 아래와 같다. 

 

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

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'powderblue';
        i = i + 1;
      }

    } else {
      target.style.backgroundColor = '#a9a9a9';
      target.style.color = 'black';
      this.value = 'night';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'black';
    i = i + 1;
    }
  }
    ">

 

배열에다가 a 태그를 사용하는 모든 텍스트들을 담았다. alist 배열이 그것이다. 

거기에 이제 반복문을 사용해서 style.color로 모든 텍스트 색을 파우더블루로 바꿔줬다. 

 

이걸 주간모드에서도 반복되게 코드를 복붙후 텍스트 색깔만 바꿔준다. 

 

그러면 완성이닷...

 

 

시시하신가요? ㅎ