如何解决递增、递减、删除和计数 UI 函数 :: 不幸的是不工作
请看下面我的 HTML 和 Javascript 代码：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shopping Cart</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<nav class="top_nav">
<img src="images/logo.png" alt="logo" id="logo" />
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="index.html">Home</a>
<a href="AboutUs.html">About Us</a>
<a href="Catalogue.html">Catalogue</a>
<a href="ContactUs.html">Contact Us</a>
</div>
<span id="hamburger" onclick="openNav()">☰</span>
<div id="search_bar">
<input type="search" placeholder="search..." />
<button><i class="fas fa-search"></i></button>
</div>
<!-- Created a shopping cart button that shows how many items are in the basket. -->
<div>
<a href="ShoppingCart.html" class="button" id="cart-button">
<i class="fas fa-shopping-cart" id="cart"></i>
<span class="amount-products badge badge-warning carttotal" id="lblCartCount" onchange="countCart()">0</span>
</a>
</div>
</nav>
<!-- Created a <div> so that the page can be populated by dynamically created elements. -->
<div id="populatecart">
<h1>Shopping Cart</h1>
</div>
<footer>
<p> © Hyperion Development. All Rights Reserved. Proudly created by <a
href="http://www.hyperiondev.com">Hyperion Development</a></p>
</footer>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Javascript：
// Navigation bar ***
// Function to display the side navigation area.
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
// Function to close the side navigation area.
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
// Shopping cart ***
// Created a map array for items to be displayed in cart.
let cart = []
// Function to stringify and set items in local storage.
function saveCart() {
localStorage.setItem("cart",JSON.stringify(cart)
)
}
// Function to parse and get items from local storage.
function loadCart() {
cart = JSON.parse(localStorage.getItem("cart"))
if (cart === null) {
cart = []
}
}
// Called loadCart function.
loadCart()
// Created a constructor function to add items to the cart.
class Plant {
constructor(name,image,price) {
this.name = name
this.image = image
this.price = price
this.count = 1
}
}
// Created the new products and included the names,images and prices.
let plant1 = new Plant(
"Agapanthus (Purple Cloud/ African Lily)","images/Agapanthus.jpg",95,);
let plant2 = new Plant(
"Sweet Alyssum (Royal Carpet)","images/Alyssum.jpg",25,);
let plant3 = new Plant(
"Clivia (Natal Lily/ Bush Lily)","images/Clivia.jpg",);
let plant4 = new Plant(
"Dianthus (Ideal Select Violet)","images/Dianthus.jpg",45,);
let plant5 = new Plant(
"Dahlia (Dreamy Eyes)","images/Dahlia.jpg",40,);
let plant6 = new Plant(
"African Daisy (Bright Lights Yellow)","images/Daisy.jpg",50,);
let plant7 = new Plant(
"Marigold (Honeycomb)","images/Marigold.jpg",35,);
let plant8 = new Plant(
"Petunia (Supercal Neon Rose)","images/Petunia.jpg",);
// Created products array.
let myPlants = [plant1,plant2,plant3,plant4,plant5,plant6,plant7,plant8];
// Function to add and increase items in the cart.
function addCart(name,price) {
// Looping through products in order to add or increase products.
for (let i = 0; i < cart.length; i++) {
if (cart[i].name === name) {
cart[i].count += 1
saveCart()
return
}
}
let plant = new Plant(name,price)
cart.push(plant)
saveCart()
}
// Function to remove and decrease items in the cart.
function removePlant(name,count = 1) {
// Looping through products in order to remove or decrease products.
for (let i = 0; i < cart.length; i++) {
let plant = cart[i];
if (plant.name === name) {
if (plant.count > count) {
plant.count -= count
} else {
cart.splice([i],1)
}
break
}
}
saveCart()
}
// Function to calculate discount total once a discount code is entered.
function calculatediscount(discountCode) {
if (discountCode === 'petals') {
return 0.90;
} else if (discountCode === 'flowers') {
return 0.75;
} else if (discountCode === 'fields') {
return 0.5;
} else {
return 0;
}
}
// Function to work out the total costs of the items
function totalCart() {
let total = 0
for (const plant of cart) {
total +=
plant.count * plant.price
}
return total;
}
// Created function to store the amount of items in the navigation bar locally underneath the cart icon.
function countCart() {
let count = 0
for (const plant of cart) {
count += plant.count
}
return count;
}
function countCart() {
let productNumbers = document.getElementById('cartquantity');
if (productNumbers) {
document.querySelectorAll(".carttotal").textContent = productNumbers;
}
saveCart()
}
// Function using the data attributes assigned in the product html pages to be able to add items by clicking the add-to-cart button.
function addVisualCart(plant) {
let name = plant.getAttribute("data-name");
let image = plant.getAttribute("data-image");
let price = plant.getAttribute("data-price");
addCart(name,price)
alert(`${name} was successfully added to the cart. Your total is Now R${totalCart()}.00`)
}
let quantity = 0;
document.getElementById('cartquantity').innerHTML = quantity;
function increaseCount() {
document.getElementById('cartquantity').innerHTML = ++quantity;
}
function decreaseCount() {
document.getElementById('cartquantity').innerHTML = --quantity;
}
let btns = document.querySelectorAll('.remove');
btns.forEach(function(btn) {
btn.addEventListener('click',updateAmount);
});
function updateAmount() {
var num = parseInt(document.getElementById('cartquantity').textContent.trim(),10);
this.value === "delete" ? num-- : num++;
document.getElementById('.cartquantity').textContent = num;
}
// Function to generate a random order reference number when clicking on the "Confirm Order" button.
function submitOrder() {
let orderRef = Math.random().toFixed(36).substr(2,9);
alert(`Thank you for your order. Your order reference number is ${orderRef}`);
}
// Function to display the cart items via the <div> "populatecart" that was created in the shopping cart's HTML page.
function displayCart() {
let productContainer = document.getElementById("populatecart");
let total = totalCart()
if (addCart && productContainer) {
Object.values(cart).map(item => {
// Dynamically adding the items and elements to the HTML using the productContainer.
productContainer.innerHTML += `
<table class="products">
<tr>
<th class="cartimage productheader"></th>
<th class="product-name productheader">PRODUCT</th>
<th class="price productheader">PRICE</th>
<th class="quantity productheader">QUANTITY</th>
<th class="total productheader">TOTAL</th>
<th class="remove productheader"></th>
</tr>
<tr>
<td class="productlist"><img src=${item.image} class="cartimage" alt="cartimage"></td>
<td class="product-name productlist">${item.name}</td>
<td class="price productlist">R${item.price}</td>
<td class="quantity productlist">
<button id="increasecount" class="add" onclick="increaseCount()><i class="fas fa-caret-square-up"></i></button>
<p id="cartquantity" class="productcount productlist">${item.count}</p>
<button id="decreasecount" class="delete" onclick="decreaseCount()"><i class="fas fa-caret-square-down"></i></button>
</td>
<td class="total productlist">R${item.price * item.count},00</td>
<td class="productlist"><button class="remove" value="delete" onclick="removePlant()"><i class="fas fa-trash-alt"></i> Remove</button></td>
</tr>
</table>`
});
// Dynamically adding the vat and other totals and select elements to the HTML using the productContainer.
productContainer.innerHTML += `
<form id="formcontainer">
<div class="discount">
<label id="discountlabel">Do you have a discount code?</label>
<input id="discountinput" placeholder=" --- Enter code here ---"/>
<button id="discountbutton" onclick="discountTotal()">Submit</button>
</div>
<label id="dropdownlabel">Is this for yourself or a gift for someone else's garden?:</label>
<select id="dropdown">
</select>
<div id="collectordelivery">
<label>How would you like to receive your order?</label><br />
<input type="radio" name="getitmethod" id="collection" value="collection" onclick="deliveryOrCollection()"/>Collection (Free of charge)<br />
<input type="radio" name="getitmethod" id="delivery" value="delivery" onclick="deliveryOrCollection()"/>Delivery
</div>
<div id="deliveryoptions">
<label>Select the preferred delivery option:</label><br />
<input id="EcoD" value="15.00" type="radio" class="deliveryinput"/> Economy Delivery (5-7 working days) at R15.00<br />
<input id="StdD" value="25.00" type="radio" class="deliveryinput"/> Standard Delivery (2-4 working days) at R25.00<br />
<input id="ExpD" value="50.00" type="radio" class="deliveryinput"/> Expedited Delivery (1-2 working days) at R50.00
</div>
</form>
<div id="vattotalcontainer">
<h4 id="vattotaltitle">VAT:</h4>
<h4 id="vattotal">R${total * 0.15}</h4>
</div>
<div id="baskettotalcontainer">
<h4 id="baskettotaltitle">Total:</h4>
<h4 id="baskettotal">R${total},00</h4>
</div>
<button id="submitorder" onclick="submitOrder()">Confirm Order</button>`
}
}
// Function to calculate the discount total and to dedust this from the order total.
function discountTotal() {
let discountCode = document.getElementById("discountinput").value;
let total = document.getElementById("baskettotal");
total.innerHTML = "R" + totalCart() * calculatediscount(discountCode);
}
displayCart();
// jQuery ***
$(document).ready(function () {
$('.quantity').each(function() {
var $this = $(this);
var $input = $this.find('.productcount');
$this.on('click','.add',function() {
var val = parseInt($input.val());
$input.val(++val);
}).on('click','.delete',function() {
var val = parseInt($input.val());
$input.val(--val);
});
});
// Created the dropdown options via jQuery with this function
let myOptions = {
select : '--- Please select ---',forme : 'This is for me.',gift : 'This is a gift. Please do not include a slip.'
};
let mySelect = $('#dropdown');
$.each(myOptions,function(val,text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
// Created function to hide and show the delivery functions when someone selects either collect or delivery.
$("#deliveryoptions").hide();
$('input[name="getitmethod"]').click(function () {
$("#deliveryoptions").hide();
if ($('input[name="getitmethod"]').is(':checked')) {
let radiovalue = $("input[name='getitmethod']:checked").val();
if (radiovalue === "delivery") {
$("#deliveryoptions").show();
} else {
$("#deliveryoptions").hide();
}
}
});
});
//Created a function for the bee to "fly on the "Catalogue page".
$(document).keydown(function (key) {
switch (parseInt(key.which,10)) {
// Left arrow pressed.
case 37:
$('.buzzerbee').stop().animate({
left: "-=200px"
},'fast');
break;
// Up arrow pressed.
case 38:
$('.buzzerbee').stop().animate({
top: '-=200px'
},'fast');
break;
// Right arrow pressed.
case 39:
$('.buzzerbee').stop().animate({
left: '+=200px'
},'fast');
break;
// Down arrow pressed.
case 40:
$('.buzzerbee').stop().animate({
top: '+=200px'
},'fast');
break;
}
})
// Created function to hide or show the product summary table on the "Catalogue" page.
$("#hide").click(function () {
$("table").hide(1000);
});
$("#show").click(function () {
$("table").show(1000);
});
// Created a chained function for the view our catalogue header on the "About Us" page.
$("#seeheaderbetter").click(function () {
$("#viewcatalogue").css("color","#05520f").animate({
width: "100%"
})
//Enlarges the font size and makes the element bigger.
.animate({
fontSize: "46px"
})
.animate({
borderWidth: 30
});
});
我正在尝试执行增量、减量和删除功能，但不幸的是没有任何成功。有人告诉我，可以通过调用 addCart 和 removePlant 函数来操作递增和递减函数，因为它们本质上做同样的事情。
应通过单击相应的按钮来执行这些功能。我已经尝试将 eventListeners 添加到 Javascript 并通过在 HTML 元素中引用 onclick ，但没有发生任何事情。当我在 console.log 中测试 addCart 和 removePlant 时，它运行良好。只是在 UI 中操作它。
我也无法通过导航栏上的 countCart 函数填充购物车的徽章计数器。我已经尝试过与上面相同的（eventListeners 和 HTML onclick），因为它也应该由按钮操作，但不幸的是它没有显示。
如果有人能指出我实现这些功能的正确方向，我将不胜感激。
解决方法
我设法解决了上面提到的问题，感谢 Abronsius 教授指出它将是一个字符串。
我的解决方案如下：
Javascript：
// Function using the data attributes assigned in the product html pages to be able to delete items by clicking the remove button.
function removeVisualCart(plant) {
let name = plant.getAttribute("data-name");
let count = plant.getAttribute("data-count");
removePlant(name,count);
countInCart();
location.reload();
alert(`${name} was successfully removed`);
}
// Created an increment function to amend the item count in the cart by clicking on the "up" arrow.
function increment(plant) {
let name = plant.getAttribute("data-name");
let image = plant.getAttribute("data-image");
let price = plant.getAttribute("data-price");
addCart(name,image,price);
countInCart();
location.reload();
}
// Created an decrement function to amend the item count in the cart by clicking on the "down" arrow.
function decrement(plant) {
let name = plant.getAttribute("data-name");
removePlant(name,1);
countInCart();
location.reload();
}
// Created function to show the amount of items in the navigation bar on the cart icon.
function countInCart() {
let productNumbers = document.getElementById("lblCartCount");
if (productNumbers) {
productNumbers.innerHTML = countCart();
}
}
countInCart();
HTML：
<div>
<a href="ShoppingCart.html" class="button" id="cart-button">
<i class="fas fa-shopping-cart" id="cart"></i>
<span class="amount-products badge badge-warning carttotal" id="lblCartCount" onchange="countCart()">0</span>
</a>
</div>
<td class="quantity productlist">
<button
id="increasecount"
class="add"
data-name="${item.name}"
data-image="${item.image}"
data-price="${item.price}"
onclick="increment(this)"
>
<i class="fas fa-caret-square-up"></i>
</button>
<p id="cartquantity" class="productcount productlist">${item.count}</p>
<button
id="decreasecount"
class="delete"
data-name="${item.name}"
onclick="decrement(this)"
><i class="fas fa-caret-square-down"></i></button>
</td>
<td class="total productlist">R${
item.price * item.count
},00</td>
<td class="productlist">
<button
data-name="${item.name}"
data-count="${item.count}"
onclick="removeVisualCart(this)"
class="remove" value="delete" onclick="removePlant()">
<i class="fas fa-trash-alt">
</i> Remove</button></td>
</tr>
</table>
我希望这能帮助遇到同样问题的其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。