[js] 배열과 반복문

10096 단어 jsjs

예제

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ex</title>
</head>
<body>
  <h1>Loop & Array</h1>
    <script>
      var coworkers = ['egoing','leezche','duru','taeho'];
    </script>
    <h2>Co workers</h2>
    <ul>
      <script>
        var i = 0;
        while(i < coworkers.length){
          document.write('<li>'+coworkers[i]+'</li>')
          document.write('<li><a href="http://a.com/'+coworkers[i]+'">'+coworkers[i]+'</a></li>');
          i += 1;
        }
      </script>
</ul>
</body>
</html>

🟣 배열과 반복문 활용

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

a태그를 모두 alist 배열에 넣고
alist배열의 크기만큼 반복하여 alist 속의 모든 색을 바꿔준다

⌨️ 코드

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){
      console.log(alist[i]);
      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){
      console.log(alist[i]);
      alist[i].style.color = 'blue';
      i = i+1;
        }
  }
🔥 #15 글 수정 기능
VAD 구현 (3) - 알고리즘 계산 프로 세 스 와 프레임 워 크

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage