<h2>第一種寫法</h2>
  <input type="text" value="01" class="inputNum" disabled />
  <button class="jq-addNum">+1</button>
  <button class="jq-format">zero</button>

  <h2>第二種寫法</h2>
  <input type="text" value="02" class="inputValue" disabled />
  <button class="jq-plus">+1</button>
  <button class="jq-zero">zero</button>

  <h2>第三種寫法 </h2>
  <input type="text" value="03" id="input" disabled />
  <button id="plus">+1</button>
  <button id="format">zero</button>

* {
  padding: 0;
  margin: 0;
  list-style: none;
}

body {
  box-sizing: border-box;
  font-family: "Noto Sans TC", sans-serif;
  width: 500px;
  margin: 0 auto;
  background-color: #333;
}

h2 {
  margin-top: 10%;
  color: #ffffff;
  margin-bottom: 2%;
}

button {
  padding: 5px 15px;
  cursor: pointer;
  outline: none;
}

input {
  width: 60%;
  height: 25px;
  padding-left: 12px;
  color: #ffffff;
  background-color: #000;
  border: 2px solid #7d3ca3;
}
.jq-format,
.jq-zero,
#format {
  background-color: #f59595;
  border: 2px solid #f59595;
  &:hover {
    background: darken(#f59595, 10%);
  }
}

.jq-addNum,
.jq-plus,
#plus {
  background-color: #4dd44d;
  border: 2px solid #4dd44d;
  color: #fff;
  &:hover {
    background: darken(#4dd44d, 10%);
  }
}

$(function () {
  //加總 1
  $(".jq-addNum").click(function () {
    plus();
  });

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

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

  let inputValue = 0;
  //第二種寫法
  $(".jq-plus").click(function () {
    inputValue += 1;
    $(".inputValue").val(inputValue);
    console.log(typeof inputValue);
  });

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

const oPlus = () => {
  let val = document.querySelector("#input").value;
  document.querySelector("#input").value = ++val;
  console.log(typeof val);
};

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