计算购物车内产品的总成本并显示在底部而不是手动输入
[英]Calculate the total cost of the products within the shopping cart and displaying it at the bottom rather than manual input
问题描述
我制作了一个结帐表格，其中显示了产品的成本、小计、GST 成本、交付成本和总价。 id 喜欢做的是获取每个具有 class class = "price"产品的成本（但 id 假设他们可能需要一个 id），并将它们加在一起得到总数。 该总计将在小计值加上交付成本的基础上增加 15% 来计算。
这是结帐表格（抱歉长度太长）~有些样式不相关，因为它是从网站上的页面中提取的。
对此的任何帮助将不胜感激。 我的猜测是他们需要一个 id，然后我会使用 getElementById 来获取值并将它们加在一起，但我不知道我将如何做到这一点。
<head> <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </head> <main> <div class='payment-form'> <div class='checkout-tabs'> <div class='details-field'> <div class='details-inputs'> <h3>Accepted Payment Methods</h3> <div class="icon-container"> <i class="fab fa-cc-visa"></i> <i class="fab fa-cc-mastercard"></i> <i class="fab fa-cc-apple-pay"></i> <i class="fab fa-cc-amazon-pay"></i> <i class="fab fa-cc-paypal"></i> </div> <label><i class="fa fa-user"></i> Full Name</label><input class='input-field ' type="text" placeholder="Bobby K Mack"> <label><i class="fa fa-phone-alt"></i> Phone Number</label><input class='input-field ' type="text" placeholder="(###) ###-####"> <label><i class="fa fa-envelope"></i> Email</label><input class='input-field ' type="text" placeholder="john@example.com"> <label><i class="fa fa-institution"></i> City</label><input class='input-field ' type="text" placeholder="Mount Cook"> <table class="half-input-table"> <tr> <td> <label for="Country"><i class="fa fa-globe"></i> Country</label><input class='input-field ' type="text" id="Country" name="Country" placeholder="NZL"> </td> <td> <label for="zip"><i class="fas fa-map-marker-alt"></i> Zip Code</label><input class='input-field ' type="text" id="zip" name="zip" placeholder="7999"> </td> </tr> </table> <label for="input-field">Name on Card</label><input class='input-field ' placeholder="Bobby K Mack"></input> <label for="input-field">Card Number</label><input class='input-field ' placeholder="####-####-####"></input> <table class='half-input-table '> <tr> <td> <label for="input-field">Exp Year</label><input class='input-field ' placeholder="2021"></input> </td> <td> <label for="input-field">CVV</label><input class='input-field ' placeholder="123"></input> </td> </tr> </table> </div> </div> <div class='order-info'> <div class='order-info-content'> <h2>Cart <i class="fa fa-shopping-cart"></i></h2> <div class='devider'></div> <table class='order-table' id="checkout-itm-1"> <tbody> <tr> <td><img src='https://aoc-pim.s3.amazonaws.com/USA%20content/g2/CQ27G2/CQ27G2_F.png' width="100%"></img> </td> <td> <br> <span class='product-name'>AOC C27G2</span> <button class="item-btn" onclick="removeItem1()">X</button> <br>27" Full HD Curved Monitor<br> <li class='product description'>Resolution: 1920x1080</li> <li class='product description'>Refresh Rate: 165hz</li> <li class='product description'>Response Time: 1 ms</li> </td> </tr> <tr> <td> <div class='price'>$429.00 (GST Inc)</div> </td> </tr> </tbody> </table> <div class='devider' id="dev1"></div> <table class='order-table' id="checkout-itm-2"> <tbody> <tr> <td><img src='https://www.computerlounge.co.nz/data/media/images/catalogue/Products2/Peripherals/Mice/Logitech/22752_1.jpg?maxheight=950&maxwidth=600&quality=100&404=default.jpg' width="100%"></img> </td> <td> <br> <span class='product-name'>Logitech G402 Hyperion Fury</span> <button class="item-btn" onclick="removeItem2()">X</button> <br>Gaming Mouse<br> <li class='product description'>Movement Detection: Optical</li> <li class='product description'>Programmable Buttons: 8</li> <li class='product description'>Hand Orientation: Right Hand</li> <li class='product description'>Maximum DPI: 4,000</li> </td> </tr> <tr> <td> <div class='price'>$94.89 (GST Inc)</div> </td> </tr> </tbody> </table> <div class='devider' id="dev2"></div> <table class='order-table' id="checkout-itm-3"> <tbody> <tr> <td><img src='https://www.pbtech.co.nz/imgprod/H/S/HSTLOG4443629__1.jpg?h=1434805038' width="90%"></img> </td> <td> <br> <span class='product-name'>Logitech G332</span> <button class="item-btn" onclick="removeItem3()">X</button> <br>Stereo Gaming Headset<br> <li class='product description'>Sound Mode: Stereo</li> <li class='product description'>Microphone: Yes</li> <li class='product description'>Interface: 3.5mm</li> <li class='product description'>Colour: Black</li> </td> </tr> <tr> <td> <div class='price'>$133.00 (GST Inc)</div> </td> </tr> </tbody> </table> <div class='devider' id="dev3"></div> <table class='order-table' id="checkout-itm-4"> <tbody> <tr> <td> <img src='data:image/jpeg;base64,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' width="80%"></img> </td> <td> <br> <span class='product '>GGPC Legend</span> <button class="item-btn" onclick="removeItem4()">X</button> <br>RTX 2070 SUPER Gaming PC<br> <li class='product description'>CPU: AMD Ryzen 7</li> <li class='product description'>GPU: Nvidia RTX 2070 Super</li> <li class='product description'>Memory: 16GB</li> </td> </tr> <tr> <td> <div class='price'>$2,413.85 (GST Inc)</div> </td> </tr> </tbody> </table> <div class='devider '></div> <div class="cost-sum-headers"> <span style='float:left; '> <div class='total-font'> Subtotal </div> <div class='total-font '> GST </div> <div class='total-font '> Delivery </div> TOTAL </span> <span class="cost_sum"> <div class='total-font '>$2,753.35</div> <div class='total-font '>$398.16</div> <div class='total-font '>$26.97</div> <div class="total-font">$3,172.11</div> </span> <button class='checkout-button'>Checkout</button> </div> </div> </div> </div> </div> </main> <style> body { background-color: #424242; } .icon-container { text-align: center; } .fa, .fab { font-size: 3.125em; } .fa-heart { color: #ddd !important; } .fa-cc-apple-pay { background: -webkit-linear-gradient(45deg, rgb(119, 119, 119), rgb(255, 255, 255)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fa-cc-mastercard { background: -webkit-linear-gradient(0deg, #ffef00, #ff6f00, #ff0000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fa-cc-visa { background: -webkit-linear-gradient(90deg, rgb(255, 255, 0), rgb(255, 255, 255), rgb(35, 38, 250)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fa-cc-paypal { background: -webkit-linear-gradient(45deg, rgb(0, 4, 255), rgb(0, 225, 255)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fa-cc-amazon-pay { background: -webkit-linear-gradient(45deg, rgb(255, 138, 4), rgb(255, 174, 0)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fa-google-pay { background: -webkit-linear-gradient(0deg, rgb(255, 0, 0), rgb(241, 147, 40), rgb(5, 206, 22), rgb(0, 174, 255)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .order-info-content .fa-shopping-cart { color: #212121; } /* Main body of checkout section */ .checkout-tabs { height: 59em; width: 75.000em; background: #fff; display: flex; border-radius: 2.063em; } @media only screen and (max-width: 700px) { .checkout-tabs { height: 62em; } } /* ======================================================================================================== Payment Form ======================================================================================================== */ .payment-form h2 { margin-bottom: 0em; margin-top: 1.563em; text-align: center; font-weight: 200; font-size: 1.2em; } .order-info-content h2 { margin-bottom: 0em; text-align: center; font-weight: 500; font-size: 1.5em; color: #212121; } .payment-form label { margin-bottom: 0.625em; display: block; color: #ddd; } .payment-form { justify-content: center; align-items: center; display: flex; } .order-table .product-name { font-weight: 500; } .order-table .description { font-weight: 200; font-size: 0.750em; font-size: .8em; list-style-type: none; } .half-input-table { border-collapse: collapse; width: 100%; } .half-input-table td:first-of-type { border-right: 0.625em solid #212121; width: 50%; } .order-info { height: 100%; width: 50%; padding-left: 1.563em; padding-right: 1.563em; position: relative; } .price { bottom: 0em; position: absolute; right: 0em; color: #21212180; } .order-table td:first-of-type { width: 25%; } .order-table { position: relative; } .devider { height: 0.063em; width: 100%; margin-top: 0.625em; margin-bottom: 0.625em; background: #21212185; } .cost_sum { float: right; text-align: right; } .total-field { width: 50%; margin-bottom: 20px; } .quantity { width: 10%; margin-left: 5px; float: right; } .price-right { float: right; } .checkout-button { border: solid; border-color: rgba(221, 221, 221, 0.281); background: rgb(53, 53, 53); padding: 0.7em; border-radius: 1.250em; font-size: 1.250em; color: rgb(255, 255, 255); cursor: pointer; width: 100%; } .checkout-button:hover { opacity: 95%; } .total-font { line-height: 1.2em; font-size: 1.000em; font-size: 1em; font-weight: 400; } .input-field { background: #ddd; margin-bottom: 0.625em; margin-top: 0.188em; line-height: 1.5em; font-size: 1.250em; font-size: 1.3em; border: none; border-radius: 0.313em; padding: 0.313em 0.625em 0.313em 0.625em; color: #fff; box-sizing: border-box; width: 100%; margin-left: auto; margin-right: auto; } .details-field { background: #212121; height: 100%; width: 50%; color: #eee; justify-content: center; font-size: 0.875em; font-size: .9em; box-sizing: border-box; padding-left: 1.563em; padding-right: 1.563em; border-radius: 1.875em; border-style: solid; border-color: white; } .details-inputs { margin-top: 1.563em; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; } .details-inputs h3 { text-align: center; padding: 0em; margin-top: 0em; font-size: large; } .item-btn { color: red; background-color: transparent; border-style: none; float: right; } .item-btn:hover { cursor: pointer; } .checkout-form-1 { height: 300px; width: 400px; margin: 20px auto; border: 2px solid black; text-align: center; background-color: white; } </style>
2 个解决方案
解决方案1
1 2020-10-28 07:37:48
您不需要 ID，因为 ID 必须是唯一的。
我在页面上没有你的交货所以这是总数
注意：您的 HTML 非常无效。 跨度中不能有 div。 此外，我会将样式表放在外部并放置在头部的开头
const prices = [...document.querySelectorAll(".order-info .price")] .map(price => +price.textContent.replace(/[^\\d|.]/g, "")) // get rid of text and $ const sum = prices.length > 0 ? prices.reduce((a, b) => a + b) : 0; // sum the array of prices - if none, then 0 console.log(sum.toFixed(2)); // sum of prices const costs = [...document.querySelectorAll(".cost_sum div")]; const total = costs.length > 0 ? costs.reduce((acc, cost) => { acc += +cost.textContent.replace(/[^\\d|.]/g, ""); return acc; }, 0) : 0; console.log(total.toFixed(2))
body { background-color: #424242; } .icon-container { text-align: center; } .fa, .fab { font-size: 3.125em; } .fa-heart { color: #ddd !important; } .fa-cc-apple-pay { background: -webkit-linear-gradient(45deg, rgb(119, 119, 119), rgb(255, 255, 255)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fa-cc-mastercard { background: -webkit-linear-gradient(0deg, #ffef00, #ff6f00, #ff0000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fa-cc-visa { background: -webkit-linear-gradient(90deg, rgb(255, 255, 0), rgb(255, 255, 255), rgb(35, 38, 250)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fa-cc-paypal { background: -webkit-linear-gradient(45deg, rgb(0, 4, 255), rgb(0, 225, 255)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fa-cc-amazon-pay { background: -webkit-linear-gradient(45deg, rgb(255, 138, 4), rgb(255, 174, 0)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fa-google-pay { background: -webkit-linear-gradient(0deg, rgb(255, 0, 0), rgb(241, 147, 40), rgb(5, 206, 22), rgb(0, 174, 255)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .order-info-content .fa-shopping-cart { color: #212121; } /* Main body of checkout section */ .checkout-tabs { height: 59em; width: 75.000em; background: #fff; display: flex; border-radius: 2.063em; } @media only screen and (max-width: 700px) { .checkout-tabs { height: 62em; } } /* ======================================================================================================== Payment Form ======================================================================================================== */ .payment-form h2 { margin-bottom: 0em; margin-top: 1.563em; text-align: center; font-weight: 200; font-size: 1.2em; } .order-info-content h2 { margin-bottom: 0em; text-align: center; font-weight: 500; font-size: 1.5em; color: #212121; } .payment-form label { margin-bottom: 0.625em; display: block; color: #ddd; } .payment-form { justify-content: center; align-items: center; display: flex; } .order-table .product-name { font-weight: 500; } .order-table .description { font-weight: 200; font-size: 0.750em; font-size: .8em; list-style-type: none; } .half-input-table { border-collapse: collapse; width: 100%; } .half-input-table td:first-of-type { border-right: 0.625em solid #212121; width: 50%; } .order-info { height: 100%; width: 50%; padding-left: 1.563em; padding-right: 1.563em; position: relative; } .price { bottom: 0em; position: absolute; right: 0em; color: #21212180; } .order-table td:first-of-type { width: 25%; } .order-table { position: relative; } .devider { height: 0.063em; width: 100%; margin-top: 0.625em; margin-bottom: 0.625em; background: #21212185; } .cost_sum { float: right; text-align: right; } .total-field { width: 50%; margin-bottom: 20px; } .quantity { width: 10%; margin-left: 5px; float: right; } .price-right { float: right; } .checkout-button { border: solid; border-color: rgba(221, 221, 221, 0.281); background: rgb(53, 53, 53); padding: 0.7em; border-radius: 1.250em; font-size: 1.250em; color: rgb(255, 255, 255); cursor: pointer; width: 100%; } .checkout-button:hover { opacity: 95%; } .total-font { line-height: 1.2em; font-size: 1.000em; font-size: 1em; font-weight: 400; } .input-field { background: #ddd; margin-bottom: 0.625em; margin-top: 0.188em; line-height: 1.5em; font-size: 1.250em; font-size: 1.3em; border: none; border-radius: 0.313em; padding: 0.313em 0.625em 0.313em 0.625em; color: #fff; box-sizing: border-box; width: 100%; margin-left: auto; margin-right: auto; } .details-field { background: #212121; height: 100%; width: 50%; color: #eee; justify-content: center; font-size: 0.875em; font-size: .9em; box-sizing: border-box; padding-left: 1.563em; padding-right: 1.563em; border-radius: 1.875em; border-style: solid; border-color: white; } .details-inputs { margin-top: 1.563em; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; } .details-inputs h3 { text-align: center; padding: 0em; margin-top: 0em; font-size: large; } .item-btn { color: red; background-color: transparent; border-style: none; float: right; } .item-btn:hover { cursor: pointer; } .checkout-form-1 { height: 300px; width: 400px; margin: 20px auto; border: 2px solid black; text-align: center; background-color: white; }
<head> <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </head> <main> <div class='payment-form'> <div class='checkout-tabs'> <div class='order-info'> <div class='order-info-content'> <h2>Cart <i class="fa fa-shopping-cart"></i></h2> <div class='devider'></div> <table class='order-table' id="checkout-itm-1"> <tbody> <tr> <td><img src='https://aoc-pim.s3.amazonaws.com/USA%20content/g2/CQ27G2/CQ27G2_F.png' width="100%"> </td> <td> <br> <span class='product-name'>AOC C27G2</span> <button class="item-btn" onclick="removeItem1()">X</button> <br>27" Full HD Curved Monitor<br> <li class='product description'>Resolution: 1920x1080</li> <li class='product description'>Refresh Rate: 165hz</li> <li class='product description'>Response Time: 1 ms</li> </td> </tr> <tr> <td> <div class='price'>$429.00 (GST Inc)</div> </td> </tr> </tbody> </table> <div class='devider' id="dev1"></div> <table class='order-table' id="checkout-itm-2"> <tbody> <tr> <td><img src='https://www.computerlounge.co.nz/data/media/images/catalogue/Products2/Peripherals/Mice/Logitech/22752_1.jpg?maxheight=950&maxwidth=600&quality=100&404=default.jpg' width="100%"> </td> <td> <br> <span class='product-name'>Logitech G402 Hyperion Fury</span> <button class="item-btn" onclick="removeItem2()">X</button> <br>Gaming Mouse<br> <li class='product description'>Movement Detection: Optical</li> <li class='product description'>Programmable Buttons: 8</li> <li class='product description'>Hand Orientation: Right Hand</li> <li class='product description'>Maximum DPI: 4,000</li> </td> </tr> <tr> <td> <div class='price'>$94.89 (GST Inc)</div> </td> </tr> </tbody> </table> <div class='devider' id="dev2"></div> <table class='order-table' id="checkout-itm-3"> <tbody> <tr> <td><img src='https://www.pbtech.co.nz/imgprod/H/S/HSTLOG4443629__1.jpg?h=1434805038' width="90%"> </td> <td> <br> <span class='product-name'>Logitech G332</span> <button class="item-btn" onclick="removeItem3()">X</button> <br>Stereo Gaming Headset<br> <li class='product description'>Sound Mode: Stereo</li> <li class='product description'>Microphone: Yes</li> <li class='product description'>Interface: 3.5mm</li> <li class='product description'>Colour: Black</li> </td> </tr> <tr> <td> <div class='price'>$133.00 (GST Inc)</div> </td> </tr> </tbody> </table> <div class='devider' id="dev3"></div> <table class='order-table' id="checkout-itm-4"> <tbody> <tr> <td> <img src='https://www.pbtech.co.nz/imgprod/W/K/WKSGGPC50042__10.jpg' width="80%"> </td> <td> <br> <span class='product '>GGPC Legend</span> <button class="item-btn" onclick="removeItem4()">X</button> <br>RTX 2070 SUPER Gaming PC<br> <li class='product description'>CPU: AMD Ryzen 7</li> <li class='product description'>GPU: Nvidia RTX 2070 Super</li> <li class='product description'>Memory: 16GB</li> </td> </tr> <tr> <td> <div class='price'>$2,413.85 (GST Inc)</div> </td> </tr> </tbody> </table> <div class='devider '></div> <div class="cost-sum-headers"> <div style='float:left; '> <div class='total-font'>Subtotal</div> <div class='total-font '>GST</div> <div class='total-font '>Delivery</div> TOTAL </div> <div class="cost_sum"> <div class='total-font '>$2,753.35</div> <div class='total-font '>$398.16</div> <div class='total-font '>$26.97</div> <div class="total-font">$3,172.11</div> </div> <button class='checkout-button'>Checkout</button> </div> </div> </div> </div> </div> </main>
解决方案2
1 2020-10-28 08:01:17
您可以使用querySelectorAll
例如：
// Get all the elements that have the `.price` class
const prices = document.querySelectorAll(".price");
然后你可以使用array.reduce()遍历价格
// convert the nodeList into an array and loop over it
let total = [...prices].reduce((acc, price) => {
return acc + parseFloat(price.innerHTML);
}, 0);
但是，这需要您编辑HTML
从
<div class='price'>$429.00 (GST Inc)</div>
像 -
<div><span>$</span><div class='price'>429.00</div> <span>(GST Inc)</span></div>
或者您可以在price.innerHTML上使用正则表达式
淘汰赛：无法将数量变化与购物车中的总成本绑定
[英]Knockout: Unable to bind change in quantity to total cost in shopping cart
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.