JavaScript shopping cart development tutorial with perfect functions
In the previous 2 sections, we have added and subtracted the shopping cart, and the function of changing the total price has been completed, but there are still some small problems.
If I enter text in the text box, in English, we will It needs to be processed
Friends, think about it, enter content in the text box, when our mouse leaves the text box, a loss of focus event will be triggered. Next, we will use onblur to handle this. Loss of focus event,
If we enter a number, then the total price also needs to be calculated based on the number we enter.
Let’s write the loss of focus event. The code is as follows:
<script>
document.getElementById('id').onblur = function(){
var id = document.getElementById('id').value;
//判斷是否是數(shù)字或者是否小于1
if(isNaN(id) || id < 1){
alert("請輸入正確的數(shù)字");
document.getElementById('id').value = 1;
return;
}
document.getElementById('td2').innerHTML = parseInt(id) * parseInt(good);
}The above code: When the content of the text is not a number, or is less than 1, it will prompt, and then it will not execute further and return directly
So we have completed this function
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">
window.onload=function(){
var input = document.getElementById('id').value; //獲取文本框的value值
var good = document.getElementById('td').innerHTML; //獲取id是td的html文本內容
//加號功能
document.getElementById('a2').onclick = function(){
var v1 = document.getElementById('id').value;
v1=parseInt(v1);
document.getElementById('id').value = v1 + 1;
document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1+1);
}
//減號功能
document.getElementById('a1').onclick = function(){
var v1 = document.getElementById('id').value;
if(v1>1){
v1=parseInt(v1);
document.getElementById('id').value = v1 - 1;
document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1-1);
}else{
document.getElementById('id').value=1;
}
}
document.getElementById('id').onblur = function(){
var id = document.getElementById('id').value;
//判斷是否是數(shù)字或者是否小于1
if(isNaN(id) || id < 1){
alert("請輸入數(shù)字");
document.getElementById('id').value = 1;
return;
}
document.getElementById('td2').innerHTML = parseInt(id) * parseInt(good);
}
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<th>名稱</th>
<th>單價</th>
<th>數(shù)量</th>
<th>總價</th>
</tr>
<tr class="tr2">
<td>手表</td>
<td id="td">1999</td>
<td>
<a href="#" id="a1" class="tp1">-</a>
<input type="text" value="1" id="id">
<a href="#" id="a2" class="tp2">+</a>
</td>
<td id="td2">1999</td>
</tr>
</table>
</body>
</html>
