[JavaScript] 배열과 반복문 활용하기

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

저번 포스팅을 통하여 버튼을 클릭하였을 때 backgroundColor와 color의 값이 변경되는

야간/주간 모드 버튼을 제작하였는데요,

 

다만, a 태그가 되어있는 값들은 color의 값이 변경되지 않는 오류가 발생되었습니다.

a 태그의 값도 같이 변경시켜줄 수 있게끔 배열과 반복문을 활용하여 문제 해결을 해주었습니다.

 

문제 해결에 앞서 배열과 반복문의 개념을 정리해보았습니다.

---

실행결과

var [ ] 값의 list 값을 입력한 후 배열 이용하여 리스트 완성

while( ) { ~ } 반복문 이용하여 출력

i = 0;

배열의 첫 번째 (chany) index 값 = 0

i = i + 1; 을 통하여 차례대로 index 값을 불러옴

 

i = 0 --> index 값이 0, chany 불러옴

i = i + 1 -->  0 + 1 = 1 --> index 값이 1, mini 불러옴 

i = i + 1 --> 1 + 1 = 2 --> index 값이 2, youngchae 불러옴

~

이와 같은 유형이 반복됩니다.

 

다만, list 값이 추가되거나 삭제될 경우 index while ( i < 4 ) 절까지 변경을 해주어야 하는 번거로움 발생

while ( i < 4 )가 아닌, while ( i < friends.length ) 값을 주어서 배열 값을 편리하게 변경할 수 있게 해 주었습니다.

friends.length --> friends 값의 길이(수) 의미

 

 

배열과 반복문의 개념은 위와 같이 이해하였고, 실전에 적용해보도록 하겠습니다.

---

문제 발생!

 

a 태그가 되어있는 값들은 color값 변경이 안됨

---

해결방법?

 

document.querySelectorAll('a') --> 모든 a 태그들이 배열의 형식으로 나타남

이를 이용하여, 배열과 반복문 활용 후 문제 해결

 

 

※ document.querySelector('a') ---> 첫 번째 a 태그만 가져옴