Tutorial troli beli-belah pembangunan JavaScript untuk melaksanakan fungsi tanda tambah
Mula-mula mari kita lihat kod html berikut
<!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>
</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>Kemudian mari kita tulis fungsi tanda tambah id tersebut ialah a2. dapatkan nilai kotak kuantiti dan dapatkan kandungan HTML bagi jumlah kotak harga, apabila tanda tambah diklik
Kemudian kami menggunakan fungsi parseInt untuk menukar v1 kepada nombor Nilai kuantiti pada masa ini sudah 2Jadi kami menggunakan document.getElementById(. 'id').value = v1 + 1;Kemudian kami menetapkan nilai pada html jumlah kotak harga, dan mendarabkan kuantiti dengan harga unit Dengan cara ini, apabila kita klik tanda tambah dalam shopping cart, fungsi menukar jumlah harga telah dilaksanakan Kod lengkap adalah seperti berikut:
<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);
}
}
</script>. 
