I have a list of product and i want to show a description of the product when i click to details but now land me to a page and i have all product listed again, i just want to show just that one with specific ID.Any advice will be good.Thanks a lot.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>LIST PRODUCT</h1>
<div class="iconCart">
<img src="icon.png">
<div class="totalQuantity">0</div>
</div>
</header>
<div class="productDetail">
</div>
</div>
<div class="cart">
<h2>
CART
</h2>
<div class="listCart">
<div class="item">
</div>
</div>
<div class="buttons">
<div class="close">
CLOSE
</div>
<div class="checkout">
<a href="checkout.html">CHECKOUT</a>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
//show datas product in list
function addDataToHTML() {
// remove datas default from HTML
let listProductHTML = document.querySelector('.listProduct');
listProductHTML.innerHTML = '';
// add new datas
if (products != null) // if has data
{
products.forEach(product => {
let newProduct = document.createElement('div');
newProduct.classList.add('item');
newProduct.innerHTML =
`<img src="${product.image}" alt="">
<h2>${product.name}</h2>
<div class="price">$${product.price}</div>
<a href="details.html">Details</a>
<button onclick="addCart(${product.id})">Add To Cart</button>`;
listProductHTML.appendChild(newProduct);
});
}
}
// Function to display product details
function productDetails(id) {
let product = products.find(product => product.id === id);
let productDetailHTML = document.querySelector('.productDetail');
productDetailHTML.innerHTML = `
<h2>${product.name}</h2>
<p>${product.description}</p>
`;
}
//show datas product in list
function addDataToHTML() {
// remove datas default from HTML
let detailProductHTML = document.querySelector('.productDetail');
detailProductHTML.innerHTML = '';
// add new datas
if (products) // if has data
{
products.forEach(product => {
let detProduct = document.createElement('div');
detProduct.classList.add('item');
detProduct.innerHTML =
`<img src="${product.image}" alt="">
<h2>${product.name}</h2>
<p>${product.description}</p>
<button onclick="addCart(${product.id})">Add To Cart</button>`;
detailProductHTML.appendChild(detProduct);
});
}
}
New contributor
Milan Vidanovic is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1