要點知識
-
window.onload加載后執(zhí)行JS代碼 -
document.getElementById通過ID獲取元素 -
parseInt把字符串或者小數(shù)轉(zhuǎn)化成整數(shù)
數(shù)量增減器是電商網(wǎng)站必備利器鲜戒，我們學(xué)一下三步完成這一利器。
HTML代碼
<input id="inc" type="button" value="+">
<input id="count" type="text" value="1" size="1" style="text-align:center;">
<input id="dec" type="button" value="-">
JS代碼
- 增加JS代碼結(jié)構(gòu)
在script標簽或者js文件阻桅，需要加入如下代碼俭识。這段代碼作用是使js代碼在HTML元素完全顯示(加載)后執(zhí)行慨削。為了使js代碼可以放在HTML任何位置，需要把所有js代碼放到這段代碼里面套媚。
window.onload = function() {
}
- 獲取元素
我們要獲取所有需要的元素缚态。
var count = document.getElementById("count");
var inc = document.getElementById("inc");
var dec = document.getElementById("dec");
- 設(shè)置事件
給加入按鈕事件。效果如下：
- 單擊+按鈕堤瘤，文本框數(shù)字加一玫芦。
inc.onclick = function() {
count.value = parseInt(count.value) + 1;
};
- 單擊-按鈕，文本框數(shù)字減一本辐。
dec.onclick = function() {
count.value = parseInt(count.value) - 1;
};
注意：文本框的value的值是string類型桥帆，需要轉(zhuǎn)換為number類型才能進行算術(shù)運算
代碼總匯
window.onload = function() {
var count = document.getElementById("count");
var inc = document.getElementById("inc");
var dec = document.getElementById("dec");
inc.onclick = function() {
count.value = parseInt(count.value) + 1;
};
dec.onclick = function() {
count.value = parseInt(count.value) - 1;
};
};
