javascript - 两个按钮一个功能(递增、递减)

Question

我希望能够增加和减少一个值(5)，并且我想用一个函数来覆盖它(我知道如何用两个函数来实现)。 不幸的是，我无法完成它，也无法找出问题所在。

这是我的代码:
HTML:

<form>
  <button type="button" value="minus" onclick="updateAmount();">
    -  
  </button>
  <span id="number">
    5
  </span>
  <button type="button" value="plus" onclick="updateAmount();">
    +  
  </button>
</form>

JS:

var num = parseInt(document.getElementById('number');
var btn = document.querySelector('button');

btn.addEventListener('click', updateAmount);

function updateAmount(){    
    btn.value === "minus" ? num-- : num++;  
  document.getElementById('number').value = num;
}

也可在JSfiddle

如果可能的话，我更喜欢普通的 JS 解决方案，但欢迎任何建议:)

谢谢!

Answer 1

对您的方法的最小更改是将参数传递给函数:

function updateAmount(value) {
  console.log("Update it by: " + value);
}

<form>
  <button type="button" value="minus" onclick="updateAmount(-1);">
    -  
  </button>
  <span id="number">
    5
  </span>
  <button type="button" value="plus" onclick="updateAmount(1);">
    +  
  </button>
</form>

或者使用您的 value 属性并将 this 传递到函数中:

function updateAmount(btn) {
  var value = btn.value == "minus" ? -1 : 1;
  console.log("Update it by: " + value);
}

<form>
  <button type="button" value="minus" onclick="updateAmount(this);">
    -  
  </button>
  <span id="number">
    5
  </span>
  <button type="button" value="plus" onclick="updateAmount(this);">
    +  
  </button>
</form>

后一种方法与现代事件处理完美结合:

// Scoping function so our `updateAmount` isn't global
(function() {
  document.querySelector("button[value=minus]").addEventListener("click", updateAmount);
  document.querySelector("button[value=plus]").addEventListener("click", updateAmount);
  
  function updateAmount() {
    var value = this.value == "minus" ? -1 : 1;
    console.log("Update it by: " + value);
  }
})();

<form>
  <button type="button" value="minus">
    -  
  </button>
  <span id="number">
    5
  </span>
  <button type="button" value="plus">
    +  
  </button>
</form>