我被困在如何計算這個專案中我的購物車的總金額和總價格上。任務是創建一個簡單的（初學者）電子商務網站，客戶應該能夠點擊產品并將其添加到他們的購物車（顯示產品的名稱、數量和價格，數量和價格應該更新根據客戶點擊產品附帶的按鈕的次數正確判斷）。
而且我只能使用javascript（或必要時使用html）。
我的網站大部分都在作業。一切都可以添加到購物車中，并且購物車會跟蹤每種產品的數量和價格。
但我不知道怎么做，所以當我按下購物車下方的購買按鈕時，添加到購物車的所有產品的總金額和總價格顯示在購物車下方的字串中。
我試過在網上搜索答案，但我似乎無法弄清楚。
請幫忙！:)
非常感謝您能想到的任何事情，因為在這一點上我完全一無所知。值得注意的是，我對 javascript 真的很陌生！
到目前為止，這是我的 javascript 代碼：
var products =
[
{
"name": "Aloe Vera",
"image": "bilder/severin-candrian-dgvFsLfIX9E-unsplash.jpg",
"origin": "Nederl?nderna",
"description": "L?ttsk?tt suckulent med tjocka gr?na blad. En av v?rldens ?ldsta l?kev?xkter. Trivs p? soliga platser. L?t den torka ut mellan varje vattning.",
"height": "120cm",
"care": "Trivs ljust, men undvik direkt solljus. Vattna undertill och inte p? v?xten, men l?t jorden torka mellan varje vattning. Ge flytande n?ring fr?n v?r till h?st. Eventuell omplantering ska g?ras p? v?ren.",
"price": 59
},
{
"name": "Marmorblad",
"image": "bilder/severin-candrian-8nONCr6eTeg-unsplash.jpg",
"origin": "Brasilien",
"description": "Fin och sp?nnande v?xt med kontrastrika blad med gr?nt m?nster och lila undersida p? bladen. Denna dekorativa planta passar perfekt i en kruka p? golvet eller p? en piedestal eller ett sidobord.",
"height": "65cm",
"care": "Ge den lite utrymme s? att bladen kan str?cka ut sig v?l b?de upp?t och ?t sidorna och skapa en gr?n och harmonisk atmosf?r i hemmet. Trivs i ljus och halvskugga, undvik direkt solljus. H?ll jorden l?tt fuktig. Gillar att bli duschad p? bladen.",
"price": 299
},
{
"name": "Lyktranka",
"image": "bilder/severin-candrian-xGpYDi-0348-unsplash.jpg",
"origin": "Sydafrika, Swaziland och Zimbabwe",
"description": "?ven k?nd som Hj?rtan p? tr?d. Lyktrankan ?r mycket l?tt att sk?ta och ?r en vacker h?ngv?xt med sm? m?rkgr?na hj?rtformade blad med ett silverskimrande m?nster. Plantan kan bli ?ver en meter, vilket g?r den v?l l?mpad som h?ngv?xt eller i en h?g kruka.",
"height": "15 cm",
"care": "Trivs ljust, undvik direkt solljus. L?t den torka l?tt mellan vattningarna.",
"price": 79
}
];
let cart = {} ;
function initCart() {
for (let product of products) {
cart[product.name] = 0;
}
}
function renderCart() {
let tbody = document.querySelector("#cart > tbody");
tbody.innerHTML = "";
for (let product of products) {
let row = tbody.insertRow(-1);
let cellName = row.insertCell(-1);
let cellAmount = row.insertCell(-1);
let cellPrice = row.insertCell(-1);
let amount = cart[product.name];
cellName.textContent = product.name;
cellAmount.textContent = amount;
cellPrice.textContent = amount * product.price;
}
}
function increment(name) {
console.log("Name: " name);
cart[name] ;
renderCart();
}
function buy() {
document.getElementById("totalCart").textContent = "Du har lagt till " count " st" " produkter." " " "Vilket blir en summa p? " total " kr" "." ;
}
var count = countCart() ;
var total = totalCart() ;
function countCart() {
var totalCount = 0 ;
for (var i in cart) {
totalCount = cart[i].amount ;
}
return totalCount ;
}
function totalCart() {
var totalPrice = 0 ;
for (var i in cart) {
totalPrice = cart[i].price ;
}
return totalPrice ;
}
function renderProducts() {
const template = `
<img>
<div >
<div>
<span ></span>
</div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div>
<input value="L?gg i varukorg" type="button"/>
</div>
</div>
`;
const container = document.querySelector("#products");
for (let product of products) {
let item = document.createElement("div");
item.classList.add("item", "ml-2");
item.innerHTML = template;
item.querySelector("img").src = product.image;
item.querySelector(".name").textContent = product.name;
item.querySelector(".origin").textContent = product.origin;
item.querySelector(".height").textContent = product.height;
item.querySelector(".care").textContent = product.care;
item.querySelector(".description").textContent = product.description;
item.querySelector(".price").textContent = product.price;
item.querySelector(".button").addEventListener("click", () => increment(product.name));
container.appendChild(item);
}
}
window.onload = function() {
renderProducts();
initCart();
renderCart();
}
還有我的html：
<body>
<h1>Varukorg</h1>
<div class="container">
<div class="row">
<table class="table" id="cart">
<thead>
<tr>
<th>Produkt</th>
<th>Antal</th>
<th>Pris</th>
</tr>
</thead>
<tbody id="table-body"></tbody>
</table>
<form>
<input class="buy-btn" onclick="buy()" value="K?p" type="button"/>
</form>
<p id="totalCart"></p>
<h2>V?xter</h2>
<div class="" id="products"></div>
</div>
</div>
</body>
<script src="inlamning2.js"></script>
對不起，有些詞是瑞典語！您可能需要知道的唯一詞是：
"l?gg i varukorgen" = 添加到購物車
"k?p" = 購買
“價格” = 價格
“安塔爾” = 數量
“產品” = 產品
uj5u.com熱心網友回復：
您的問題是您cart僅將以下資訊存盤在鍵值對中：鍵是產品名稱，數量是值。物件中根本沒有價格資訊cart，因此計算它需要查找原始products陣列。
此外，countandtotal在函式外部宣告buy()，但函式在呼叫時不會更新這些值。這些值僅在運行時設定，之后不會更新。
因此，最快的解決方案是將你的buy()函式重寫成這樣的東西，同時洗掉countCart()andtotalCart()函式：
function buy() {
var count = Object.values(cart).reduce((sum, cur) => sum = cur, 0);
var total = Object.entries(cart).reduce((sum, cur) => {
const [product, quantity] = cur;
return sum = products.find(p => p.name === product).price * quantity;
}, 0);
document.getElementById("totalCart").textContent = "Du har lagt till " count " st" " produkter." " " "Vilket blir en summa p? " total " kr" ".";
}
代碼說明：
count非常簡單：您獲取cart物件中的所有值并使用Array.prototype.reducetotalcart有點復雜：您需要以一種允許您使用鍵（產品名稱）和值（數量）訪問的方式遍歷您的。Object.entries()可以為您做到這一點。然后就是查找products物件陣列以檢索給定產品的價格，并將數量相乘。
var products = [{
"name": "Aloe Vera",
"image": "bilder/severin-candrian-dgvFsLfIX9E-unsplash.jpg",
"origin": "Nederl?nderna",
"description": "L?ttsk?tt suckulent med tjocka gr?na blad. En av v?rldens ?ldsta l?kev?xkter. Trivs p? soliga platser. L?t den torka ut mellan varje vattning.",
"height": "120cm",
"care": "Trivs ljust, men undvik direkt solljus. Vattna undertill och inte p? v?xten, men l?t jorden torka mellan varje vattning. Ge flytande n?ring fr?n v?r till h?st. Eventuell omplantering ska g?ras p? v?ren.",
"price": 59
},
{
"name": "Marmorblad",
"image": "bilder/severin-candrian-8nONCr6eTeg-unsplash.jpg",
"origin": "Brasilien",
"description": "Fin och sp?nnande v?xt med kontrastrika blad med gr?nt m?nster och lila undersida p? bladen. Denna dekorativa planta passar perfekt i en kruka p? golvet eller p? en piedestal eller ett sidobord.",
"height": "65cm",
"care": "Ge den lite utrymme s? att bladen kan str?cka ut sig v?l b?de upp?t och ?t sidorna och skapa en gr?n och harmonisk atmosf?r i hemmet. Trivs i ljus och halvskugga, undvik direkt solljus. H?ll jorden l?tt fuktig. Gillar att bli duschad p? bladen.",
"price": 299
},
{
"name": "Lyktranka",
"image": "bilder/severin-candrian-xGpYDi-0348-unsplash.jpg",
"origin": "Sydafrika, Swaziland och Zimbabwe",
"description": "?ven k?nd som Hj?rtan p? tr?d. Lyktrankan ?r mycket l?tt att sk?ta och ?r en vacker h?ngv?xt med sm? m?rkgr?na hj?rtformade blad med ett silverskimrande m?nster. Plantan kan bli ?ver en meter, vilket g?r den v?l l?mpad som h?ngv?xt eller i en h?g kruka.",
"height": "15 cm",
"care": "Trivs ljust, undvik direkt solljus. L?t den torka l?tt mellan vattningarna.",
"price": 79
}
];
let cart = {};
function initCart() {
for (let product of products) {
cart[product.name] = 0;
}
}
function renderCart() {
let tbody = document.querySelector("#cart > tbody");
tbody.innerHTML = "";
for (let product of products) {
let row = tbody.insertRow(-1);
let cellName = row.insertCell(-1);
let cellAmount = row.insertCell(-1);
let cellPrice = row.insertCell(-1);
let amount = cart[product.name];
cellName.textContent = product.name;
cellAmount.textContent = amount;
cellPrice.textContent = amount * product.price;
}
}
function increment(name) {
console.log("Name: " name);
cart[name] ;
renderCart();
}
function buy() {
var count = Object.values(cart).reduce((sum, cur) => sum = cur, 0);
var total = Object.entries(cart).reduce((sum, cur) => {
const [product, quantity] = cur;
return sum = products.find(p => p.name === product).price * quantity;
}, 0);
document.getElementById("totalCart").textContent = "Du har lagt till " count " st" " produkter." " " "Vilket blir en summa p? " total " kr" ".";
}
function renderProducts() {
const template = `
<img>
<div >
<div>
<span ></span>
</div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div>
<input value="L?gg i varukorg" type="button"/>
</div>
</div>
`;
const container = document.querySelector("#products");
for (let product of products) {
let item = document.createElement("div");
item.classList.add("item", "ml-2");
item.innerHTML = template;
item.querySelector("img").src = product.image;
item.querySelector(".name").textContent = product.name;
item.querySelector(".origin").textContent = product.origin;
item.querySelector(".height").textContent = product.height;
item.querySelector(".care").textContent = product.care;
item.querySelector(".description").textContent = product.description;
item.querySelector(".price").textContent = product.price;
item.querySelector(".button").addEventListener("click", () => increment(product.name));
container.appendChild(item);
}
}
window.onload = function() {
renderProducts();
initCart();
renderCart();
}<h1>Varukorg</h1>
<div class="container">
<div class="row">
<table class="table" id="cart">
<thead>
<tr>
<th>Produkt</th>
<th>Antal</th>
<th>Pris</th>
</tr>
</thead>
<tbody id="table-body"></tbody>
</table>
<form>
<input class="buy-btn" onclick="buy()" value="K?p" type="button" />
</form>
<p id="totalCart"></p>
<h2>V?xter</h2>
<div class="" id="products"></div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/413746.html
標籤：