숙제중인데요..xml로 상품정보를 따로 ㅃㅐ면서 이제 상품명, 큰이미지도 안나오고 있어요..^^; gpt가 시키는 대로 하다가 되는것도 안되네요..^^;

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

숙제중인데요..xml로 상품정보를 따로 ㅃㅐ면서 이제 상품명, 큰이미지도 안나오고 있어요..^^; gpt가 시키는 대로 하다가 되는것도 안되네요..^^;

[왕초보] ChatGPT 300% 활용하기 v0

6주차

신*숙

・

추천

・

조회수

답변 완료

index.js -----------------------------------

iner = document.querySelector('.card-container');

cardContainer.addEventListener('click', (event) => {

if (event.target.tagName === 'IMG') {

const card = event.target.parentElement;

// 카드의 이미지와 제목 가져오기

const imageURL = card.querySelector('img').src;

const productName = card.querySelector('.title').textContent;

const productRank = card.querySelector('.rank').textContent;

window.location.href = 'detail.html?imageURL=${encodeURIComponent(imageURL)}&productName=${encodeURIComponent(productName)}&productRank=${encodeURIComponent(productRank)}';

}

});

detail.html --------------------

<!DOCTYPE html>

<head>

</head>

<body>

</div>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

</body>

</html>

product.xml --------------------------------

<small-image>https://images.unsplash.com/photo-1529635457390-aa69ba54d77d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8NHw0Z29oUVpmTmxqSXx8ZW58MHx8fHx8</small-image>

<small-image>https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8N3w0Z29oUVpmTmxqSXx8ZW58MHx8fHx8</small-image>

<small-image>https://images.unsplash.com/photo-1618677603544-51162346e165?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8OHw0Z29oUVpmTmxqSXx8ZW58MHx8fHx8</small-image>

<small-image>https://images.unsplash.com/photo-1652794121301-63e284fb31c0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXw0Z29oUVpmTmxqSXx8ZW58MHx8fHx8</small-image>

<small-image></small-image>

</images>

</product>

<small-image></small-image>

</images>

</product>

<small-image></small-image>

</images>

</product>

<small-image></small-image>

</images>

</product>

</products>

detail.js --------------------------------

// XML 데이터 로드

const xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

// XML을 파싱하여 DOM 객체로 변환

const xmlDoc = this.responseXML;

// 선택된 rank 가져오기

const params = new URLSearchParams(window.location.search);

const productName = params.get('productName');

const imageURL = params.get('imageURL');

// 제품 이름과 이미지 설정

const productNameElement = document.querySelector('.product-name strong');

productNameElement.textContent = productName;

console.log("product-name",productName); // <---

const productImageElement = document.querySelector('.product-image');

productImageElement.src = imageURL;

const selectedRank = params.get('rank');

// rank에 해당하는 제품 정보 가져오기

const products = xmlDoc.getElementsByTagName('product');

let selectedProduct;

for (let i = 0; i < products.length; i++) {

const rank = products[i].getAttribute('rank');

if (rank === selectedRank) {

selectedProduct = products[i];

break;

}

console.log("selectedProduct:", selectedProduct);

if (selectedProduct) {

// 제품 정보 표시

const productName = selectedProduct.getElementsByTagName('name')[0].textContent;

const productBrand = selectedProduct.getElementsByTagName('brand')[0].textContent;

const productCode = selectedProduct.getElementsByTagName('code')[0].textContent;

const productSex = selectedProduct.getElementsByTagName('sex')[0].textContent;

const productScnt = selectedProduct.getElementsByTagName('scnt')[0].textContent;

const productZcnt = selectedProduct.getElementsByTagName('zcnt')[0].textContent;

const productSafter = selectedProduct.getElementsByTagName('safter')[0].textContent;

const productOrk = selectedProduct.getElementsByTagName('ork')[0].textContent;

const productBrk = selectedProduct.getElementsByTagName('brk')[0].textContent;

const productOprice = selectedProduct.getElementsByTagName('oprice')[0].textContent;

const productSprice = selectedProduct.getElementsByTagName('sprice')[0].textContent;

const productCprice = selectedProduct.getElementsByTagName('cprice')[0].textContent;

const productPoint = selectedProduct.getElementsByTagName('point')[0].textContent;

// 작은 이미지 URL 가져오기

const smallImages = selectedProduct.getElementsByTagName('small-image');

const smallImageURLs = [];

for (let i = 0; i < smallImages.length; i++) {

smallImageURLs.push(smallImages[i].textContent);

}

// 가져온 정보를 HTML에 표시

document.getElementById('product-name').textContent = productName;

document.getElementById('product-brand').textContent = productBrand;

document.getElementById('product-code').textContent = productCode;

document.getElementById('product-sex').textContent = productSex;

document.getElementById('product-scnt').textContent = productScnt;

document.getElementById('product-zcnt').textContent = productZcnt;

document.getElementById('product-safter').textContent = productSafter;

document.getElementById('product-ork').textContent = productOrk;

document.getElementById('product-brk').textContent = productBrk;

document.getElementById('product-oprice').textContent = productOprice;

document.getElementById('product-sprice').textContent = productSprice;

document.getElementById('product-cprice').textContent = productCprice;

document.getElementById('product-point').textContent = productPoint;

// 작은 이미지 표시

const smallImagesContainer = document.getElementById('small-images-container');

smallImageURLs.forEach(url => {

const img = document.createElement('img');

img.src = url;

smallImagesContainer.appendChild(img);

});

} else {

console.log('선택된 rank에 해당하는 제품을 찾을 수 없습니다.');

}

};

xhttp.open('GET', 'products.xml', true);

xhttp.send();

detail.css --------------------------------

/* 스타일링은 여기에 작성하십시오 */

.container {

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: flex-start;

padding-top: 20px; /* 상단 패딩 추가 */

}

.left-section, .right-section {

width: 48%;

}

.left-section {

text-align: left;

margin-left: 20px; /* 좌측 여백 추가 */

}

.right-section {

padding-left: 20px;

padding-top: 20px;

line-height: 1.5; /* 줄간 간격을 1.5배로 설정합니다. */

}

.product-image {

max-width: 100%;

height: auto;

margin-bottom: 20px;

}

.small-images {

display: flex;

gap: 10px; /* 작은 이미지 사이의 간격을 조절합니다. */

}

.small-image {

width: 30px; /* 가로 크기를 20px로 설정합니다. */

height: 30px; /* 세로 크기를 20px로 설정합니다. */

object-fit: cover; /* 이미지가 잘리지 않고 비율을 유지하며 요소에 맞게 조절됩니다. */

}

.product-name {

font-size: 15px;

font-weight: bold;

margin-bottom: 10px;

margin-top: 5px; /* 위쪽 여백 추가 */

}

댓글 알림