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;
//判断是否是数字或者是否小于1
if(isNaN(id) || id < 1){
alert("请输入正确的数字");
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;
//判断是否是数字或者是否小于1
if(isNaN(id) || id < 1){
alert("请输入数字");
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>数量</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>
![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)
