要点知识
-
window.onload加载后执行JS代码 -
document.getElementById通过ID获取元素 -
parseInt把字符串或者小数转化成整数
数量增减器是电商网站必备利器，我们学一下三步完成这一利器。
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代码结构
在script标签或者js文件，需要加入如下代码。这段代码作用是使js代码在HTML元素完全显示(加载)后执行。为了使js代码可以放在HTML任何位置，需要把所有js代码放到这段代码里面。
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;
};
注意：文本框的value的值是string类型，需要转换为number类型才能进行算术运算
代码总汇
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;
};
};
