根据上面代码编写商品数量加减按钮,小计以及总价计算
时间: 2023-09-03 12:16:37 浏览: 63
好的,根据您的要求,我为您编写了一个简单的 JavaScript 示例代码,实现了商品数量加减按钮,小计以及总价计算的功能,您可以参考一下:
HTML 代码:
```html
<div class="item">
<div class="name">商品1</div>
<div class="price">¥10</div>
<div class="quantity">
<button class="minus">-</button>
<input type="text" value="1">
<button class="plus">+</button>
</div>
<div class="subtotal">¥10</div>
</div>
<div class="item">
<div class="name">商品2</div>
<div class="price">¥20</div>
<div class="quantity">
<button class="minus">-</button>
<input type="text" value="1">
<button class="plus">+</button>
</div>
<div class="subtotal">¥20</div>
</div>
<div class="total">
总价:<span>¥30</span>
</div>
```
JavaScript 代码:
```javascript
// 获取商品列表和总价元素
var items = document.querySelectorAll('.item');
var total = document.querySelector('.total span');
// 遍历商品列表,为每个商品添加数量加减按钮和小计计算功能
for (var i = 0; i < items.length; i++) {
// 获取商品元素的子元素
var quantity = items[i].querySelector('.quantity input');
var price = items[i].querySelector('.price');
var subtotal = items[i].querySelector('.subtotal');
// 添加数量减少按钮的点击事件处理函数
items[i].querySelector('.minus').addEventListener('click', function() {
if (quantity.value > 1) {
quantity.value--;
subtotal.textContent = '¥' + price.textContent.slice(1) * quantity.value;
updateTotal();
}
});
// 添加数量增加按钮的点击事件处理函数
items[i].querySelector('.plus').addEventListener('click', function() {
quantity.value++;
subtotal.textContent = '¥' + price.textContent.slice(1) * quantity.value;
updateTotal();
});
// 添加数量输入框的输入事件处理函数
quantity.addEventListener('input', function() {
if (quantity.value < 1) {
quantity.value = 1;
}
subtotal.textContent = '¥' + price.textContent.slice(1) * quantity.value;
updateTotal();
});
}
// 计算总价
function updateTotal() {
var sum = 0;
for (var i = 0; i < items.length; i++) {
sum += parseFloat(items[i].querySelector('.subtotal').textContent.slice(1));
}
total.textContent = '¥' + sum;
}
```
这段代码实现了一个简单的商品列表,每个商品包含商品名称、单价、数量加减按钮、小计和总价。用户可以通过点击数量加减按钮或手动输入数量来更新小计和总价。其中,通过 `querySelector()` 方法获取对应的元素,使用 `addEventListener()` 方法添加事件监听器,使用 `textContent` 属性获取和设置元素的文本内容。希望这个示例能够对您有所帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![cpp](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)