인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

rose001125님의 프로필 이미지
rose001125

작성한 질문수

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

JS로 HTML과 CSS를 컨트롤 하는 방법

34강 <태그 추가> 질문입니다.

작성

·

132

0

안녕하세용..!

 

 

저는 이 실습 문제를,

const productsData = [ { title: "감자칩", weight: 300 }, { title: "칙촉", weight: 100 }, { title: "고구마칩", weight: 300 }, { title: "오잉", weight: 50 }, ]; const app = document.querySelector("#app"); productsData.forEach(e => { app.innerHTML += `<div class=item> 상품명 : ${productsData.title}, 무게 : ${productsData.weight}</div>` });

 

이렇게 풀었는데, 혹시 왜 안되는지 알 수 있을까요?

foreach문은 돌지만, title과 weight 값이 undefined 로 찍힙니다..

답변 1

1

Jiwoon Jeong님의 프로필 이미지
Jiwoon Jeong
지식공유자

안녕하세요.

현재 undefined로 출력 되는 이유는 말 그대로 정의되있지 않은 것을 호출해서 발생한 문제인데요,

forEach문 콜백함수의 매개변수 e는 productsData 내부에 요소를 반복하여 하나씩 할당합니다.

따라서 productsData가 아닌 e로 표기를 해주시면 되겠습니다.

productsData.forEach(e => {
    app.innerHTML += `<div class=item> 상품명 : ${productsData.title}, 무게 : ${productsData.weight}</div>`
});

변경 후

productsData.forEach(e => {
  app.innerHTML += `<div class=item> 상품명 : ${e.title}, 무게 : ${e.weight}</div>`;
});

 

감사합니다.

rose001125님의 프로필 이미지
rose001125
질문자

빠른 답변 정말 감사합니다!!!~

rose001125님의 프로필 이미지
rose001125

작성한 질문수

질문하기