JavaScript deve...LOGIN

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){
	//取出当前页面的数量
	var num=document.getElementById(text).value;
	//将数量加一然后再赋值给显示数量的<inpue>中的value属性
	++num;
	document.getElementById(text).value=num;
	//取出当前页面的数量,与数量相乘,赋值给小计所属的div的页面显示内容
	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;
	//判断数量是不是负数
	if(--num<1){
		document.getElementById(text).value=0;
	}else{
		document.getElementById(text).value=num
		}
	//取出当前页面的数量,与数量相乘,赋值给小计所属的div的页面显示内容
	//给num重新赋值是放置出现num=-1情况
	var num=document.getElementById(text).value;
	var price=document.getElementById(price).innerHTML;
	document.getElementById(subtotal).innerHTML=price*num;
}
//用户在<input>框中改变数字时,光标失焦后触发change()函数	
function change(text,price,subtotal){
	//判断用户输入的是否为非数字,是则提醒用户
	if(isNaN(document.getElementById(text).value)){
		alert("请输入数字");
		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">数量</div>
		<div class="subtotal">小计</div>
		<div class="delete">操作</div>
	</div>
	<!--商品内容-->
	<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

<!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){ //取出当前页面的数量 var num=document.getElementById(text).value; //将数量加一然后再赋值给显示数量的<inpue>中的value属性 ++num; document.getElementById(text).value=num; //取出当前页面的数量,与数量相乘,赋值给小计所属的div的页面显示内容 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; //判断数量是不是负数 if(--num<1){ document.getElementById(text).value=0; }else{ document.getElementById(text).value=num } //取出当前页面的数量,与数量相乘,赋值给小计所属的div的页面显示内容 //给num重新赋值是放置出现num=-1情况 var num=document.getElementById(text).value; var price=document.getElementById(price).innerHTML; document.getElementById(subtotal).innerHTML=price*num; } //用户在<input>框中改变数字时,光标失焦后触发change()函数 function change(text,price,subtotal){ //判断用户输入的是否为非数字,是则提醒用户 if(isNaN(document.getElementById(text).value)){ alert("请输入数字"); 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">数量</div> <div class="subtotal">小计</div> <div class="delete">操作</div> </div> <!--商品内容--> <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>
submitReset Code
ChapterCourseware