Please post the url of the step you are doing.
Please also post your code.
Photos/screenshots of an error can be helpful, but it also helps to provide the complete code. Posting the code helps us help you better!
When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
var a = detail_link is a variable declaration. If you want to show the value of a in the console, just enter a.
EDIT: Should mention that console always attempts to return a value. If you create a function in the console, it will also return undefined because you haven’t actually called the function. And since there is no return value for a variable declaration, it also returns undefined.
There is many event listener (if it interacts with other event listeners).
const products = [
{
id: 1,
name: "Dress 1",
price: "$50.00",
image: "images/dress1.png",
sizes: ["S", "M", "L", "XL"],
},
{
id: 2,
name: "Dress 2",
price: "$60.00",
image: "images/dress2.png",
sizes: ["S", "M", "L", "XL"],
},
{
id: 3,
name: "Dress 3",
price: "$70.00",
image: "images/dress3.png",
sizes: ["S", "M", "L", "XL"],
},
{
id: 4,
name: "Dress 4",
price: "$80.00",
image: "images/dress4.png",
sizes: ["S", "M", "L", "XL"],
},
];
let productList = document.getElementById("product-list");
// href='javascript:void(0)' href='product.html'
function renderProducts() {
productList.innerHTML = products.map((product) => `<a href='javascript:void(0)' prod_id=${product.id} class="details-link" class="details-link">
<div class="product">
<img src="${product.image}" alt="${product.name}">
<h2>${product.name}</h2>
<p>${product.price}</p>
<label for="size${product.id}">Size:</label>
<select id="size${product.id}">
${product.sizes.map((size) => `<option value="${size}">${size}</option>`).join("")}
</select>
<label for="quantity${product.id}">Quantity:</label>
<input type="number" id="quantity${product.id}" min="1" value="1">
<button onclick="addToCart(${product.id})">Add to Cart</button>
</div></a>
`
)
.join("");
};
function contactSeller(productName, sizeId, quantityId, price) {
const phoneNumber = "SomePhoneNumber"; // Replace with your WhatsApp number
// Get selected size and quantity
const size = document.getElementById(sizeId).value;
const quantity = document.getElementById(quantityId).value;
// Construct the message
const message = `Hi, I'm interested in buying the ${productName} (Size: ${size}, Quantity: ${quantity}) for ${price}.`;
const whatsappLink = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
// Open WhatsApp
window.open(whatsappLink, '_blank');
}
function updateCartCount() {
const cartCount = document.getElementById("cart-count");
cartCount.textContent = cart.length;
}
// The code that is below causing problem *******
document.addEventListener("DOMContentLoaded", renderProducts);
let detail_link = document.getElementsByClassName('details-link');
for(let i=0;i<detail_link.length;i++) {
detail_link[i].addEventListener('click', function(e){
console.log('event listener attached');
// e.preventDefault();
if(e && e.target){
var productId = e.getAttribute('prod_id');
localStorage.setItem('prod_item',productId);
}
else{
console.log("getDetail executed without proper context");
}})
};
The HTML code is like this for index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dress EShop</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to <a href="." class="brand_name">DigiShop</a></h1>
<p onload="renderProducts()">Your one-stop shop for beautiful dresses!</p>
<a href="cart.html" class="cart-link" onload="updateCartCount()">View Cart (<span id="cart-count">0</span>)</a>
</header>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>FAQ</li>
<li>Cart</li>
</ul>
<section class="products" id="product-list">
<!-- Products will be dynamically generated here -->
</section>
<footer>
<p>Contact us on WhatsApp to place your order!</p>
<a href="https://wa.me/1234567890" target="_blank">Chat on WhatsApp</a>
</footer>
<script src="script.js"></script>
<script src="index.js"></script>
<script src="cart.js"></script>
</body>
</html>
Then I have a product-detail page (product.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Details</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Product Details</h1>
<a href="index.html" class="back-link">Back to Home</a>
</header>
<section class="product-details" id="product-details">
<!-- Product details will be dynamically generated here -->
</section>
<footer>
<p>Contact us on WhatsApp to place your order!</p>
<a href="https://wa.me/1234567890" target="_blank">Chat on WhatsApp</a>
</footer>
<script src="product.js"></script>
<script src="cart.js"></script>
</body>
</html>
This is not working and i think i know javascript but I think debugging is one of the great skill that teaches a lot of things.
I am never redirected to product detail page. And I have used localStorage to pass down the product_id to another page for selecting the item(product)
The product.js file is as follows
const products = [
{
id: 1,
name: "Dress 1",
price: "$50.00",
image: "images/dress1.png",
sizes: ["S", "M", "L", "XL"],
},
{
id: 2,
name: "Dress 2",
price: "$60.00",
image: "images/dress2.png",
sizes: ["S", "M", "L", "XL"],
},
{
id: 3,
name: "Dress 3",
price: "$70.00",
image: "images/dress3.png",
sizes: ["S", "M", "L", "XL"],
},
{
id: 4,
name: "Dress 4",
price: "$80.00",
image: "images/dress4.png",
sizes: ["S", "M", "L", "XL"],
},
];
function detailPageRender(productId) {
// Find the product by ID
console.log(productId);
let product = products.filter((p) => p.id == parseInt(productId));
let productDetails = document.getElementById("product-details");
// Render product details
if (product) {
productDetails.innerHTML = `<div class="product">
<img src="${product.image}" alt="${product.name}">
<h2>${product.name}</h2>
<p>${product.price}</p>
<p>${product.description}</p>
<label for="size">Size:</label>
<select id="size">
${product.sizes?.map((size) => `<option value="${size}">${size}</option>`).join('')}
</select>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" min="1" value="1">
<button onclick="addToCart(${product.id})">Add to Cart</button>
</div>`;
} else {
document.getElementById("product-details").innerHTML = "<p>Product not found.</p>";
}
localStorage.removeItem('prod_item');
};
if(localStorage.getItem('prod_item'))
{
detailPageRender(localStorage.getItem('prod_item'));
};
is this related to the question about the console of earlier?
Yes its the same console thing
which part of your code are you logging to the console? how is the screenshot of the console related to the code?
I think the problem refers to detail_link being passed to another variable which doesn’t give a value. So I think a class name of details-link isn’t yet loaded as you call detail_link?
details-link is loaded by Domcontentloaded how is it not available during query
In screenshot I try to check if variable details-link exist or not . Since it exist , in order to loop over the array I try to assign it to another variable (a, b or ab) This is returning undefined.
I somehow skim your code and I think the problem here is your data being rendered only if the page completely loaded. So your code below will return nothing.
let detail_link = document.getElementsByClassName('details-link');
As the page loaded, you can now access the detail_link in console but not in a way of using var, const, let.
In order to solve this, you have to properly use your listener, not only executing your renderProducts.
