javascript develops shopping cart function to implement plus sign function
Let’s take a look at the html part of the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{width:350px;border:1px solid #eee;text-align:center;}
.tr2{height:50px;}
input{width:30px;height:20px;text-align: center;}
a{text-decoration:none}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr class="tr2">
<td>手表</td>
<td id="price">1999</td>
<td>
<a href="#" id="a1" class="tp1">-</a>
<input type="text" value="1" id="count" >
<a href="#" id="a2" class="tp2">+</a>
</td>
<td id="total">1999</td>
</tr>
<tr class="tr2">
<td>手机</td>
<td id="price_1">2000</td>
<td>
<a href="#" id="a1" class="tp1">-</a>
<input type="text" value="1" id="count_1">
<a href="#" id="a2" class="tp2">+</a>
</td>
<td id="total_1">2000</td>
</tr>
</table>
</br>
</body>
</html>As shown in the above code, we have 2 products. If we add a product each time and write the plus and minus function, then the code will be There are too many. Although it is possible, it is not advisable, so we can make a function below
Let us analyze, what are the parameters of the function?
In fact, if we do the addition and subtraction function, and then the total price changes, what we need is 3 parameters, unit price, total price, quantity
Look at the cell displaying the unit price in the above code, id is price total price cell, id is total id of the first product text box is count
Next, we look at the cell code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{width:350px;border:1px solid #eee;text-align:center;}
.tr2{height:50px;}
input{width:30px;height:20px;text-align: center;}
a{text-decoration:none}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr class="tr2">
<td>手表</td>
<td id="price">1999</td>
<td>
<a href="#" id="a1" class="tp1" onclick="a2('price','total','count')">-</a>
<input type="text" value="1" id="count" onblur="a3('price','total','count')">
<a href="#" id="a2" class="tp2" onclick="a1('price','total','count')">+</a>
</td>
<td id="total">1999</td>
</tr>
<tr class="tr2">
<td>手机</td>
<td id="price_1">1999</td>
<td>
<a href="#" id="a1" class="tp1" onclick="a2('price_1','total_1','count_1')">-</a>
<input type="text" value="1" id="count_1" onblur="a3('price_1','total_1','count_1')">
<a href="#" id="a2" class="tp2" onclick="a1('price_1','total_1','count_1')">+</a>
</td>
<td id="total_1">1999</td>
</tr>
</table>
</br>
</body>
</html>As above code, we add The minus sign is bound to a click event, which contains three parameters: product unit price price and price_1 total price total and total_1 quantity count and count_1
Let’s implement the plus sign function
<script type="text/javascript">
function a1(td,td2,id){
var price = document.getElementById(td).innerHTML;//获得单价
var total = document.getElementById(td2).innerHTML;//获得总价
var v1 = parseInt(document.getElementById(id).value);//获得数量
document.getElementById(id).value = v1+1; //获取点击后的数量
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1); //总价格等于单价乘以点击后的数量值
}
</script>Let’s take a look at the following complete code: Let’s see how the effect is achieved
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{width:350px;border:1px solid #eee;text-align:center;}
.tr2{height:50px;}
input{width:30px;height:20px;text-align: center;}
a{text-decoration:none}
</style>
<script type="text/javascript">
function a1(td,td2,id){
var price = document.getElementById(td).innerHTML;//获得单价
var total = document.getElementById(td2).innerHTML;//获得总价
var v1 = parseInt(document.getElementById(id).value);//获得数量
document.getElementById(id).value = v1+1;
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1);
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr class="tr2">
<td>手表</td>
<td id="price">1999</td>
<td>
<a href="#" id="a1" class="tp1" onclick="a2('price','total','count')">-</a>
<input type="text" value="1" id="count" onblur="a3('price','total','count')">
<a href="#" id="a2" class="tp2" onclick="a1('price','total','count')">+</a>
</td>
<td id="total">1999</td>
</tr>
<tr class="tr2">
<td>手机</td>
<td id="price_1">1999</td>
<td>
<a href="#" id="a1" class="tp1" onclick="a2('price_1','total_1','count_1')">-</a>
<input type="text" value="1" id="count_1" onblur="a3('price_1','total_1','count_1')">
<a href="#" id="a2" class="tp2" onclick="a1('price_1','total_1','count_1')">+</a>
</td>
<td id="total_1">1999</td>
</tr>
</table>
</br>
</body>
</html>Look at the above example, no matter how many products I have, if I click the plus sign, the price will be different, and the total price will be different, so use this The method will be more convenient and simpler
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
