JavaScript develops shopping cart functions to implement text box processing
In the previous two sections, we have completed the addition and subtraction functions. Now let’s process the number of text boxes.
Under normal circumstances, we can input text boxes, and we also allow it here. Input, when we enter a paragraph of characters, or Chinese
we should not execute it, give a prompt message, and then give the text box a default value. Let’s look at the code below:
<script>
function a3(td,td2,id){
var price = document.getElementById(td).innerHTML;//獲得單價
var total = document.getElementById(td2).innerHTML;//獲得總價
var v1 = parseInt(document.getElementById(id).value);//獲得數量
if(isNaN(v1) || v1 < 1){
alert("請輸入正確的數字");
document.getElementById(id).value = 1 ;
v1 = parseInt(document.getElementById(id).value);
}else{
document.getElementById(id).value = v1 ;
}
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1);
}
</script>v1 is the value of the text box we obtained. To judge v1, the isNaN() function detects whether v1 is an illegal number. v1<1 is a negative number. In this case, we give a default value and then This value is assigned to the quantity
The following shows the complete code for the addition and subtraction functions and processing of the text box:
<!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);
}
function a2(td,td2,id){
var price = document.getElementById(td).innerHTML;//獲得單價
var total = document.getElementById(td2).innerHTML;//獲得總價
var v1 = parseInt(document.getElementById(id).value);//獲得數量
if(v1>1){
document.getElementById(id).value = v1-1;
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1-1);
}else{
var v1 = 1;
}
}
function a3(td,td2,id){
var price = document.getElementById(td).innerHTML;//獲得單價
var total = document.getElementById(td2).innerHTML;//獲得總價
var v1 = parseInt(document.getElementById(id).value);//獲得數量
if(isNaN(v1) || v1 < 1){
alert("請輸入正確的數字");
document.getElementById(id).value = 1 ;
v1 = parseInt(document.getElementById(id).value);
}else{
document.getElementById(id).value = v1 ;
}
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1);
}
</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>
