我是一个初学者程序员，我在浏览器加载javascript代码时遇到一些问题。我的代码中有任何错误吗？或者可能是我的计算机有问题。如果有帮助：我正在使用谷歌浏览器。我正在使用Mac OS和Visual Studio代码：）
于飞：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content=“Sailor_Guardian_Toys” />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta description="Creating the first store" />
<meta author="Christopher Maalouf" />
<title>The Store of the Century</title>
<script src="assets/main.js"></script>
<link rel="stylesheet" href="assets/main.css" />
<link rel="stylesheet" href="assets/products.css" />
</head>
<body>
<header>
<a class="skiplink" href="#maincontent">Skip to main content</a>
<img class="logo" src="images/Logo.png" />
<!-- Nav Bar Begins-->
<nav>
<a class="nav-item" href="index.html">Home</a>
<a class="nav-item" href="Products.html">Products </a>
<a class="nav-item" href="Cart.html">Cart</a>
<a class="nav-item" href="About.html">About Us</a>
<a class="nav-item" href="Contact.html">Contact Us</a>
<a class="nav-item" href="Privacy.html">Privacy</a>
<a class="nav-item" href="TC.html">T&C</a>
<form action="form/submit" method="GET">
<input type="text" name="text" class="search" placeholder="Search Here" />
<input class="search-button" type="submit" name="submit" class="submit" value="Search" />
</form>
</nav>
<!-- Nav Bar Ends-->
</header>
<main>
<!-- Store Desc Begins-->
<center>
<h1>In the name of the moon, I'll punish you!</h1>
</center>
<section class="description">
<figure>
<img class="title-img" src="images/Title.jpg" alt="Sailor Scouts" />
<figcaption id="maincontent" class="title-caption">
<h2>Feed your Sailor Scouts cravings with our amazing dolls!</h2>
</figcaption>
</figure>
</section>
<section class="description1">
<p>
The magical action-adventures of a teenage girl who learns of her destiny as the legendary warrior
Sailor Moon, must band together with the other Sailor Scouts to defend the Earth and Galaxy.
The story centers around an air-headed crybaby, named Usagi, and her friends Ami,
Rei, Makato, and Minako. Now you can also take part in their magical adventures, or at least take a
sneak peak at their inner workings, with our beautiful collectables. </p>
<p>
The story of these beautiful women, is now one of the most remembered and celebrated animated series in the
world.
and now you can experience it all in your own living room!</p>
</section>
<!-- Store Desc Ends-->
<!--Product Section Begins-->
<section onload="Product()">
<div id="product-featured-box">
</div>
<div id="product-box">
</div>
<!-- Product Section Ends-->
</section>
</main>
<!--CALL TO ACTION BUTTON-->
<div class="button-wrapper">
<a class="button cta-button" href="Products.html">Check THIS Out!</a>
</div>
<!--END CALL TO ACTION BUTTON-->
<footer>
<p>Copyright 2022© The Store of the Century <br> All Rights Reserved</p>
<p><a href="privacy.html">Privacy</p></a>
<p><a href="TC.html"></p>Terms & Conditions</a>
</footer>
</body>
<br>
<CENTER>
<div class="pagination">
<a href="#">«</a>
<a href="index.html" class="active">1</a>
<a href="Products.html">2</a>
<a href="Cart.html">3</a>
<a href="About.html">4</a>
<a href="Contact.html">5</a>
<a href="Privacy.html">6</a>
<a href="TC.html">7</a>
<a href="#">»</a>
</div>
</CENTER>
</html>JavaScript语言：
//Creating Product function and storing each parameter to product function
function Product(productName, image, price, featured, description) {
this.productName = productName;
this.image = image;
this.price = price;
this.featured = featured;
this.description = description;
this.displayProductListing = function (){
let myHtml ='<div class="product box">' ;
myHtml += '<img src="images/' + this.image + '.jpg" alt="' + this.productName + '">';
myHtml += '<p class="price">' + this.price + '</p>';
myHtml += '</div>';
return myHtml;
}
};
//Empty array
var allProducts = [];
// 10 new products
allProducts.push(new Product("Sailor Moon Doll", "images/Sailor Moon Doll.jpg", 45.00, true, "Sailor Moon in all her glory, nested upon the moon"));
allProducts.push(new Product("Sailor Mars Doll", "images/Sailor Mars Doll.jpg", 45.00, false, "Sailor Mars looking all dashing in her battle gear!"));
allProducts.push(new Product("Luna Plushie", "images/Luna Plushie.jpg", 25.00, true, "The original Luna helper plushie!"));
allProducts.push(new Product("Artemis Plushie", "images/Artemis Plush.jpg", 25.00, false, "Artemis, our lovely Venus helper!"));
allProducts.push(new Product("Sailor Moon DVD S1", "images/Sailor Moon DVD.jpg", 100.00, true, "Season 1 of the original 1990's Sailor Moon"));
allProducts.push(new Product("Sailor Moon DVD S2", "images/Sailor Moon DVD S2.jpg", 100.00, false, "Season 2 of the original 1990's Sailor Moon"));
allProducts.push(new Product("Sailor Venus Doll", "images/Sailor Venus Doll.jpeg", 45.00, false, "Sailor Venus LOVE CHAIN!"));
allProducts.push(new Product("Sailor Jupiter Doll", "imagesSailor Jupiter Doll.jpg", 45.00, false, "The Sailor of Thunder"));
allProducts.push(new Product("Sailor Mercury Doll", "images/Sailor Mercury Doll.jpg", 45.00, false, "Water and intelligence, that is her game!"));
allProducts.push(new Product("Tuxedo Mask Doll", "images/Tuxedo Mask Doll.jpg", 45.00, false, "The love interest"));
function isFeaturedProduct(product) {
return product.featured;
};
function getFeaturedProduct() {
return allProducts.filter(isFeaturedProduct);
};
function displayProducts(featured) {
let productsToDisplay = featured ? getFeaturedProduct() : allProducts;
let myHtml = "";
for (const prod of productsToDisplay) {
myHtml += '<h1>Top 3 Most Mystical Products</h1>';
myHtml += '<div class="product-featured-box">';
myHtml += prod.displayProductListing();
myHtml += '</div>';
myHtml += '<a href="Products.html">Take a Peek</a>';
}
return myHtml;
}
//Featured Products
var featuredProductsElement = document.getElementById("product-box");
if (featuredProductsElement){
featuredProductsElement.innerHTML = displayProducts(true);
}
//All Products
var myProductsElement = document.getElementById("product-featured-box");
if (myProductsElement){
myProductsElement.innerHTML = displayProducts(false);
}我需要看到我的产品填充在我的主页上，但没有什么是工作这是一个学校的项目，我似乎不能得到任何运行
1条答案
按热度按时间yzuktlbb1#
由于您没有提到，我假设您使用的是Windows操作系统，javasript文件名为
main.js，它位于asset文件夹中。在html文件的script标记中：-替换为：
<script src="assets/main.js"></script>使用此：
<script src="./assets/main.js"></script>