完璧な機能を備えたJavaScriptショッピングカート開発チュートリアル
前の 2 つのセクションで、ショッピング カートの追加と削除、合計金額の変更機能が完成しましたが、まだ小さな問題がいくつかあります
テキスト ボックスに英語でテキストを入力する場合は、それに対処するには
皆さん、よく考えてください。テキスト ボックスに內(nèi)容を入力してください。マウスがテキスト ボックスから離れると、フォーカス喪失イベントがトリガーされます。次に、これを処理するために onblur フォーカス喪失イベントを使用します。
數(shù)値を入力した場合、合計価格も入力した數(shù)値に基づいて計算する必要があります次に、フォーカス喪失イベントを書きましょう。コードは次のとおりです:<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);
}上記のコード: コンテンツがテキストの値が數(shù)値ではないか、1 未満です。プロンプトが表示され、それ以上実行せずに直接戻りますそれで、この関數(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">
window.onload=function(){
var input = document.getElementById('id').value; //獲取文本框的value值
var good = document.getElementById('td').innerHTML; //獲取id是td的html文本內(nèi)容
//加號功能
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>
