0%

jQuery 筆記 - 點擊按鈕使數字自動加總與歸零

click
記錄專案中一個簡單的功能,點擊按鈕可以讓文字框的數字累加,點擊另一個按鈕使之歸零。

HTML 架構

所以我需要一個輸入框與兩個按鈕。

1
2
3
<input type="text" value="01" class="inputNum" disabled />
<button class="jq-addNum">+1</button>
<button class="jq-format">zero</button>

JS 寫法

第一種寫法

  • 這邊把方法與點擊事件分開。
  • 增加一個 plus 函式,綁定輸入框並給予值。
  • 輸入框的值為自己的加總。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//加總 1
$(".jq-addNum").click(function () {
plus();
});

function plus() {
let inputNum = $(".inputNum").val();
$(".inputNum").val(++inputNum);
console.log(typeof (inputNum)); // number
}

//歸零
$(".jq-format").click(function () {
$(".inputNum").val(0);
});

第二種寫法

  • 宣告變數起始為 0。
  • 點擊按鈕使變數累加 1。
  • 綁定 input 使其值為變數的值。
1
2
3
4
5
6
7
8
9
10
11
let inputValue = 0;
//第二種寫法
$(".jq-plus").click(function () {
inputValue += 1;
$(".inputValue").val(inputValue);
console.log(typeof (inputValue)); //number
});

$(".jq-zero").click(function () {
$(".inputValue").val(0);
});

第三種寫法

原生寫法。

  • 先給兩個函式方法。
  • 宣告變數為 input 的值,其值為自己的相加。
1
2
3
4
5
6
7
8
9
10
11
const oPlus = () => {
let val = document.querySelector("#input").value;
document.querySelector("#input").value = ++val;
console.log(typeof(val)); //number
};

const oFormat = () => {
document.querySelector("#input").value = 0;
};
document.querySelector("#plus").addEventListener("click", oPlus);
document.querySelector("#format").addEventListener("click", oFormat);

結語

第二種方法並不會從 input 的預設值開始累加,而是從頭累加,第一種跟第三種其實是一樣的概念,只是寫法不同,累積起始點為 value 的預設值。