前面2节,我们已经把购物车加减,总价发生变化的功能已经完成,但是还是有一些小问题的
文本框内我如果输入文字,英文,这样我们就需要来进行处理了
小伙伴们思考一下,在文本框输入内容,当我们鼠标离开文本框,就会触发失去焦点事件,下面我们来做这块的处理就会用到 onblur 失去焦点事件,
如果我们输入的是数字,那么总价是也需要根据我们输入的数字来进行计算的
下面我们来写失去焦点事件,代码如下:
<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); }
如上代码:当文本的内容不是数字,或者小于1的时候, 会提示,然后不往下执行,直接返回
所以这块的功能我们也已经完成
完整代码如下:
<!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>