[바닐라코딩 | Javascript] - Events Practice (신호등 불 켜기), for문

1)문제 - Quiz #3

Events Practice - Starter Kit

 

2)풀이

spanElements는 여러 요소를 가진 유사 배열 객체이다. 이에 for문을 통해 해당 객체의 내부 item들을 모두 순회하며 배경색을 초기화하였음.

const buttonElement = document.querySelector("button");

const spanElement1 = document.querySelectorAll('span')[0]
const spanElement2 = document.querySelectorAll('span')[1]
const spanElement3 = document.querySelectorAll('span')[2]

var spanElements =document.querySelectorAll('span')

spanElement1.addEventListener('click',function(){ spanElement1.style.backgroundColor='Red'
})
spanElement2.addEventListener('click',function(){ spanElement2.style.backgroundColor='orange'
})
spanElement3.addEventListener('click',function(){ spanElement3.style.backgroundColor='Green'
})

buttonElement.addEventListener('click',function(){ 
  for(let i=0; i< spanElements.length; i++){ 
  spanElements[i].style.backgroundColor='white'}})

 

(3)오답노트

①spanElement[i]를 하면 위 정의한 각각의 spanElement들이 설정될 줄 알았다.

buttonElement.addEventListener('click',function(){ 
  for(let i=0; i< spanElements.length; i++){ 
  spanElement[i].style.backgroundColor='white'}})

//Uncaught ReferenceError: spanElement is not defined

 

②spanElemetns 하면 내부 item들이 모두 선택되어 style 적용될 줄 알았다.

// buttonElement.addEventListener('click',function(){ 
//   spanElements.style.backgroundColor='white'})

//  Cannot set properties of undefined (setting 'backgroundColor')

 

③for문 - 함수 실행문 안에 넣고 변수에 할당해야한다. 몰랐다.

⑴As-is

let a = for(let i=0; i< spanElements.length; i++){
  console.log(spanElements[i])}
a();

//Uncaught SyntaxError: Unexpected token 'for'

⑵To-be

let abcbc = function(){for(let i=0; i< spanElements.length; i++){console.log(i)}};
abcbc();

//console 화면 0 1 2 순회하며 출력됨.

⑶참고로 return 잘 못 쓰면 반복문이 순회를 안 함. 그렇다고 return 반환도 안 하면 undefined임.

-0

let abcbc = function(){for(let i=0; i< spanElements.length; i++)
{ return i}};
console.log(abcbc //console에 0만 출력됨

-undefined

let abcbc = function(){for(let i=0; i< spanElements.length; i++)
{i}};
console.log(abcbc());  //undefined

 

(4)참고 URL - 비슷한 사례

dom 객체 사용