提姆寫程式

0%

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

發表於 分類於 Disqus：
有趣的點擊按鈕互動效果。

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 的預設值。