(Vanila Js) 연산자 오류 해결

정말 초보같은 실수를 했다

 

이런식으로 검정 박스 안의 제목을 클릭하면 전체 이미지와 제목, 숫자가 바뀌는 자바스크립트 예제를 학습하던 중에

for 문을 돌리려고 코드를 짜고 돌리려는데

 

클릭을 하면 이렇게 html 속 a태그에 걸린 이벤트가 실행되는 것이다...^^

 

const gallery = document.querySelector('#gallery');
const hOne = gallery.querySelector('h1');
const str = gallery.querySelector('strong');
const img = gallery.querySelector('.showBox img');
const btns = gallery.querySelectorAll('.btns li');
const span = gallery.querySelector('span');

let total = btns.length;
span.innerText = total;

for (let i = 0; i > btns.length; i++) {
    btns[i].addEventListener('click', (e) => {
        e.preventDefault();

        str.innerText = i + 1;

        let clickA = btns[i].querySelector('a');
        // 		//그 a태그 안의 href 속성의 값을 get해서 변수에 넣고
        let imgSrc = clickA.getAttribute('href');
        img.setAttribute('src', imgSrc);

        let title = clickA.innerText;
        hOne.innerText = title;

        for (let k = 0; k < btns.length; k++) {
            btns[k].classList.remove('on');
        }
        btns[i].classList.add('on');
    });
}

내가 짠 코드는 이것!

prevenDefault로 a태그의 이벤트는 중단을 시켰다고 생각했는데 뭐가 문제였을까....하면서 30분을 헤맸는데

정말 어이없게도 비교연산자를 잘못썼던 것

for (let i = 0; i > btns.length; i++) {}

왜 배열의 길이보다 i가 더 크다고 해놨을까 저기서 틀렸을거라고 생각못하고 미친듯이 찾아헤맨 나...

 

for (let i = 0; i < btns.length; i++) {
	btns[i].addEventListener('click', (e) => {
		e.preventDefault();

		str.innerText = i + 1;

		let clickA = btns[i].querySelector('a');
		// 		//그 a태그 안의 href 속성의 값을 get해서 변수에 넣고
		let imgSrc = clickA.getAttribute('href');
		img.setAttribute('src', imgSrc);

		let title = clickA.innerText;
		hOne.innerText = title;

		for (let k = 0; k < btns.length; k++) {
			btns[k].classList.remove('on');
		}
		btns[i].classList.add('on');
	});
}

바꾸고나니 제대로 실행된다

두번 다시 실수는 이제,,,NO,,,,