javascript開發(fā)購物車之函數(shù)實(shí)現(xiàn)文本框處理
上兩節(jié)，我們已經(jīng)把加減的功能完成了，現(xiàn)在我們來對文本框的數(shù)量進(jìn)行處理
文本框正常情況下我們是可以輸入的，在這里我們同樣也是允許輸入的，當(dāng)我們輸入一段字符，或者中文時(shí)
我們就應(yīng)該不執(zhí)行了，給出提示信息，然后給文本框一個(gè)默認(rèn)值，下面我們來看代碼：
<script>
function a3(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(isNaN(v1) || v1 < 1){
alert("請輸入正確的數(shù)字");
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 是我們獲取的文本框的值，對 v1 進(jìn)行判斷，isNaN()函數(shù)檢測v1是不是非法的數(shù)字，v1<1 則是一個(gè)負(fù)數(shù)，這樣的情況，我們都給出一個(gè)默認(rèn)值，然后把這個(gè)值賦值給數(shù)量
下面展示一下加減功能和處理文本框的完整代碼：
<!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;
}
}
function a3(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(isNaN(v1) || v1 < 1){
alert("請輸入正確的數(shù)字");
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>單價(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>
