【发布时间】：2021-07-11 13:45:48
【问题描述】：
我正在尝试在“我们的产品”展示中展示我的所有产品，但它不起作用。我想知道我的 displayProducts 函数有什么问题。控制台将错误宣布为“未捕获（承诺中）ReferenceError：productsDOM 未定义”。 谢谢你帮助我！
这是我的 js：
const cartBtn = document.querySelector('.cart-btn')
const closeCartBtn = document.querySelector('.close-btn')
const cartDOM = document.querySelector('.cart')
const cartOverlay = document.querySelector('.cart-overlay')
const cartItems = document.querySelector('.cart-items')
const cartTotal = document.querySelector('.cart-total')
const cartContent = document.querySelector('.cart-content')
const productsDom = document.querySelector('.products-center')
//cart
let cart = []
//getting the products
class Products {
async getProducts() {
try {
let result = await fetch('products.json')
let data = await result.json()
let products = data.items;
products = products.map(item => {
const { title, price } = item.fields;
const { id } = item.sys;
const image = item.fields.image.fields.file.url;
return {
title,
price,
id,
image
}
})
return products
} catch (error) {
console.log(error)
}
}
}
//display products
class UI {
displayProducts(products) {
let result = '';
products.forEach(product => {
result += `
<!--single product-->
<article class='product'>
<div class="img-container">
<img src=${product.image} alt="" class="product-img">
<button class="bag-btn" data-id=${product.id}>
<i class="fas fa-shopping-cart"></i>add to bag
</button>
</div>
<h3>${product.title}</h3>
<h4>$${product.price}</h4>
</article>
<!--single product-->
`
})
productsDOM.innerHTML = result;
}
}
//local storage
class Storage {
}
document.addEventListener('DOMContentLoaded', () => {
const ui = new UI()
const products = new Products()
//get all products
products.getProducts().then(products => ui.displayProducts(products))
})
这是我的 JSON：
{
"items": [
{
"sys": { "id": "1" },
"fields": {
"title": "queen panel bed",
"price": 10.99,
"image": { "fields": { "file": { "url": "./images/product-1.jpeg" } } }
}
},
{
"sys": { "id": "2" },
"fields": {
"title": "king panel bed",
"price": 12.99,
"image": { "fields": { "file": { "url": "./images/product-2.jpeg" } } }
}
},
{
"sys": { "id": "3" },
"fields": {
"title": "single panel bed",
"price": 12.99,
"image": { "fields": { "file": { "url": "./images/product-3.jpeg" } } }
}
},
{
"sys": { "id": "4" },
"fields": {
"title": "twin panel bed",
"price": 22.99,
"image": { "fields": { "file": { "url": "./images/product-4.jpeg" } } }
}
},
{
"sys": { "id": "5" },
"fields": {
"title": "fridge",
"price": 88.99,
"image": { "fields": { "file": { "url": "./images/product-5.jpeg" } } }
}
},
{
"sys": { "id": "6" },
"fields": {
"title": "dresser",
"price": 32.99,
"image": { "fields": { "file": { "url": "./images/product-6.jpeg" } } }
}
},
{
"sys": { "id": "7" },
"fields": {
"title": "couch",
"price": 45.99,
"image": { "fields": { "file": { "url": "./images/product-7.jpeg" } } }
}
},
{
"sys": { "id": "8" },
"fields": {
"title": "table",
"price": 33.99,
"image": { "fields": { "file": { "url": "./images/product-8.jpeg" } } }
}
}
]
}
这是我的html：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="/css/all.min.css">
</head>
<body>
<nav class="navbar">
<div class="navbar-center">
<span class="nav-icon">
<i class="fas fa-bars"></i>
</span>
<img src="images/logo.svg" alt="">
<div class="cart-btn">
<span class="nav-icon">
<i class="fas fa-cart-plus"></i>
</span>
<div class="cart-items">0</div>
</div>
</div>
</nav>
<header class="hero">
<div class="banner">
<h1 class="banner-title">furniture collection</h1>
<button class="banner-btn">shop now</button>
</div>
</header>
<section class="products">
<div class="section-title">
<h2>Our Products</h2>
</div>
<div class="products-center">
</div>
</section>
<!--cart-->
<div class="cart-overlay">
<div class="cart">
<span class="close-cart">
<i class="fas fa-window-close"></i>
</span>
<h2>your cart</h2>
<div class="cart-content">
<!--cart-item-->
<div class="cart-item">
<img src="images/product-1.jpeg" alt="">
<div>
<h4>queen bed</h4>
<h5>$9.00</h5>
<span class="remove-item">remove</span>
</div>
<div>
<i class="fas fa-chevron-up"></i>
<p class="item-amount">1</p>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<!--end of cart item-->
</div>
<div class="cart-footer">
<h3>your total: $ <span class="cart-total">0</span></h3>
<button class="clear-cart banner-btn">clear cart</button>
</div>
</div>
<!--end of cart-->
</div>
<script src="cart.js"></script>
</body>
</html>
【问题讨论】：
标签： javascript arrays json innerhtml