728x90
onclick 이벤트를 하나씩 모두 선언하면 복잡하니 한 번에 반복문으로 묶어주려다가 작성한 코드이다.
//post store click event
var store = document.querySelectorAll(".store");
for ( var i = 0; i < store.length; i++ ){
store[i].onclick = function() {
store[i].src = "img/stored.png";
}
}
문제가 없어 보이고 작동될 것 같은데 왜 안되는지 모르겠다.
함수 내부 store[i].src 줄에서 오류가 발생한다.
콘솔 창에는
Uncaught TypeError: Cannot set properties of undefined (setting 'src')
라고 떴다.
위 코드 블록 마지막 줄 src 앞에 store[0] 으로 직접 숫자를 입력하면 잘 되는데
변수 값은 0인데 왜 안될까 계속 고민하던 중 아차 싶었다.
이유는 i 값이 함수를 선언하는 문장인 store[i]까지는 전달이 되지만
store[i].onclick 함수 내부 스코프까지는 i의 범위가 아니기 때문이다.
이후 store[i] 함수 내부에서는 또 다른 스코프의 함수가 있어야 하는 것이다.
외부 변수를 함수 내부 변수로 사용하려 하고 있었다.
해결방법
그래서 매개변수로 넘긴 변수를 또 함수 내로 어떻게 넘기는가?
이렇게 for 문 내부 스코프에 지역 변수를 선언하여 값을 넘겨주면 내부까지 모두 반복문 변수 i 값이 적용된다.
for ( var i = 0; i < store.length; i++ ){
let h = i;
store[i].onclick = function() {
store[h].src = "img/stored.png";
}
}
JS ES6 문법에서 간단하게 변수 이름만 선언하고 값을 넘기는 방법이 있었는데
그것은 아마 객체 내부였던 것 같다.
더 좋은 방법이 있다면 댓글 부탁드립니다 :)
728x90
'웹 프론트엔드(Web FrontEnd)' 카테고리의 다른 글
[CSS] 스타일 시트와 선택자 (속성과 값 적용 방법, 가상 선택자) (0) | 2022.07.31 |
---|---|
[CSS] invalid property value 오류 해결 방법 (0) | 2022.07.24 |
[HTML] <video> 태그 사용 방법 (인코딩, controls 속성) (0) | 2022.07.17 |
[HTML] <li> 태그 {<ul>, <ol>, 목록(list) 만들기} (0) | 2022.07.17 |
[HTML] <table> 테이블 태그 (rowspan, colspan, border 사용 방법) (0) | 2022.07.17 |