JavaScript development shopping cart tutorial for multiple product display
Display multiple products
The example introduced above is to display one product. When we copy the entire class="shop2" div , you will find the problem. No matter which + or - is clicked, the first product changes. This is because our trigger events are all targeted at the first product and have no universality. Therefore, we need to modify it. Our example
First pass all the variables used in the function as parameters
//Press + Button
function add(text,price,subtotal){
//Get the number of the current page
var num=document.getElementById(text).value;
//Add one to the quantity and then assign it to the value attribute in the <inpue> that displays the quantity
++num;
document.getElementById(text).value=num;
//Get the quantity of the current page, multiply it by the quantity, and assign it to the page display content of the div to which the subtotal belongs
## var price=document.getElementById(price).innerHTML;
var subtotal=price*num;
document.getElementById(subtotal).innerHTML=price*num;
}
//Press the - button
function minus(text,price,subtotal){
var num=document.getElementById(text).value;
//Determine whether the quantity is negative
if(--num<1){
## document.getElementById(text).value=0;}else{
document.getElementById(text).value=num
}
//Get the current page Quantity, multiplied by the quantity, assigned to the page display content of the div to which the subtotal belongs
//Reassigning num is to place the situation where num=-1 occurs
var num=document.getElementById(text).value;
## var price=document.getElementById(price).innerHTML;
document.getElementById(subtotal).innerHTML=price*num;
}
The other two functions are also Similarly:
//When the user changes the number in the <input> box, the change() function is triggered after the cursor is out of focus
function change(text,price,subtotal){
//Determine whether the user input is a non-number, and if so, remind the user
if(isNaN(document.getElementById(text).value)){
## alert("Please enter a number");
document.getElementById(text).value=1;
}
//Get the value of the input box with id="text"
var num=document.getElementById(text).value;
//Get the product price
var price=document.getElementById(price).innerHTML;
//Output the subtotal
document.getElementById( subtotal).innerHTML=price*num;
}
##function delect(shop2){
//Delete the div with id="shop"
document.body.removeChild(document.getElementById(shop2));
}
After that Change all the IDs involved in the two products to be different. When the event is triggered, pass in different ID values
The complete code is as follows
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<title>簡易購物車</title>
<meta charset="utf-8" />
<style>
.shop{
width:400px;
background-color:#f0f0f0;
text-align:center;
}
.shop2{
text-align:center;
clear:both;
border:1px solid black;
height:21px;
}
.goods{
float:left;
width:100px;
}
.price{
float:left;
width:50px;
}
.number{
float:left;
width:110px;
}
.subtotal{
float:left;
width:50px;
margin-top:2px;
}
.delete{
float:left;
width:35px;
margin-left:5px;
}
.text{
width: 22px;
text-align:center;
}
</style>
<script >
//按下+按鈕
function add(text,price,subtotal){
//取出當前頁面的數(shù)量
var num=document.getElementById(text).value;
//將數(shù)量加一然后再賦值給顯示數(shù)量的<inpue>中的value屬性
++num;
document.getElementById(text).value=num;
//取出當前頁面的數(shù)量，與數(shù)量相乘，賦值給小計所屬的div的頁面顯示內(nèi)容
var price=document.getElementById(price).innerHTML;
var subtotal=price*num;
document.getElementById(subtotal).innerHTML=price*num;
}
//按下-按鈕
function minus(text,price,subtotal){
var num=document.getElementById(text).value;
//判斷數(shù)量是不是負數(shù)
if(--num<1){
document.getElementById(text).value=0;
}else{
document.getElementById(text).value=num
}
//取出當前頁面的數(shù)量，與數(shù)量相乘，賦值給小計所屬的div的頁面顯示內(nèi)容
//給num重新賦值是放置出現(xiàn)num=-1情況
var num=document.getElementById(text).value;
var price=document.getElementById(price).innerHTML;
document.getElementById(subtotal).innerHTML=price*num;
}
//用戶在<input>框中改變數(shù)字時，光標失焦后觸發(fā)change()函數(shù)
function change(text,price,subtotal){
//判斷用戶輸入的是否為非數(shù)字，是則提醒用戶
if(isNaN(document.getElementById(text).value)){
alert("請輸入數(shù)字");
document.getElementById(text).value=1;
}
//取得id="text"的input框的value值
var num=document.getElementById(text).value;
//取得商品價格
var price=document.getElementById(price).innerHTML;
//將小計輸出出去
document.getElementById(subtotal).innerHTML=price*num;
}
function delect(shop2){
//刪除id="shop"的這個div
document.body.removeChild(document.getElementById(shop2));
}
</script>
</head>
<body>
<!--購物車標題-->
<div class="shop">
<div class="title">簡易購物車</div>
<div class="goods">商品</div>
<div class="price">單價</div>
<div class="number">數(shù)量</div>
<div class="subtotal">小計</div>
<div class="delete">操作</div>
</div>
<!--商品內(nèi)容-->
<div class="shop2" id="shop2">
<form>
<div class="goods">小米MIX </div>
<div class="price" id="price2">5000</div>
<div class="number">
<input type="button" value="-" onclick="minus('text2','price2','subtotal2')"/>
<input type="text" value="1" class="text" id="text2" onblur="change('text2','price2','subtotal2')"/>
<input type="button" value="+" onclick="add('text2','price2','subtotal2')"/>
</div>
<div class="subtotal" id="subtotal2">5000</div>
<div class="delete" onclick="delect('shop2')"><a href="#">刪除</a></div>
<form>
</div>
<div class="shop2" id="shop3">
<form>
<div class="goods">iphone 8 </div>
<div class="price" id="price3">6000</div>
<div class="number">
<input type="button" value="-" onclick="minus('text3','price3','subtotal3')"/>
<input type="text" value="1" class="text" id="text3" onblur="change('text3','price3','subtotal3')"/>
<input type="button" value="+" onclick="add('text3','price3','subtotal3')"/>
</div>
<div class="subtotal" id="subtotal3">5000</div>
<div class="delete" onclick="delect('shop3')"><a href="#">刪除</a></div>
<form>
</div>
</body>
</html>Note: Our page still has many imperfections. For example, if you refresh it, the previously selected information will change to what it was during initialization. There is no memory of the user's choice, no function to select all, and no product pictures. Display, etc., we will improve these in the next version
