javascript develops shopping cart function to implement minus sign function
In the previous section, we have completed the function of the plus sign. Click the minus sign. It is actually very simple.
We copy the js code of the plus sign, and then change the plus sign to the minus sign. That's it, but there will be a problem. If we keep reducing, we can reduce it to a negative number, which does not meet our requirements.
So, we must first make a judgment. The code is as follows:
<script>
function a2(td,td2,id){
var price = document.getElementById(td).innerHTML;//獲得單價(jià)
var total = document.getElementById(td2).innerHTML;//獲得總價(jià)
var v1 = parseInt(document.getElementById(id).value);//獲得數(shù)量
if(v1>1){
document.getElementById(id).value = v1-1;
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1-1);
}else{
var v1 = 1;
}
}
</script> Same code as above
First get the total unit price quantity, and then judge. When the number is greater than 1, we can subtract it. When the number is not greater than 1, we give a default value of 1
The complete code is as follows:
<!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;//獲得單價(jià)
var total = document.getElementById(td2).innerHTML;//獲得總價(jià)
var v1 = parseInt(document.getElementById(id).value);//獲得數(shù)量
document.getElementById(id).value = v1+1;
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1);
}
function a2(td,td2,id){
var price = document.getElementById(td).innerHTML;//獲得單價(jià)
var total = document.getElementById(td2).innerHTML;//獲得總價(jià)
var v1 = parseInt(document.getElementById(id).value);//獲得數(shù)量
if(v1>1){
document.getElementById(id).value = v1-1;
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1-1);
}else{
var v1 = 1;
}
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<th>名稱</th>
<th>單價(jià)</th>
<th>數(shù)量</th>
<th>總價(jià)</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>手機(jī)</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>In this way, our addition and subtraction have been completed
