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

您的方法的最小变化是将参数传递给函数：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

后一种方法很好地与现代事件处理相结合：

＆＃13;

// 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);
  }
})();

＆＃13;

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

＆＃13;

Answer 2

您可以将操作作为参数移交

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

然后

function updateAmount(action) {
   var num = parseInt(document.getElementById("number").innerHTML, 10);
   switch(action) {
      case 'minus':
         num--;
         break;
      case 'plus':
         num++;
         break;
   }
   document.getElementById("number").innerHTML = num;
}

Answer 3

你很接近，因为你有多个元素使用document.querySelectorAll()和有效的选择器来获取引用并绑定事件处理程序。

当您使用<SPAN>元素时，它没有value属性，需要使用textContent属性。

＆＃13;

var btns = document.querySelectorAll('button');
btns.forEach(function(btn) {
  btn.addEventListener('click', updateAmount);
});

function updateAmount() {
  var num = parseInt(document.getElementById('number').textContent.trim(), 10);
  this.value === "minus" ? num-- : num++;
  document.getElementById('number').textContent = num;
}

＆＃13;

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

＆＃13;

注意：摆脱难看的内嵌点击处理程序。

Answer 4

只需像updateAmount(this)

一样使用

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

你可以试试这个......

   <html>
       <form>
          <button type="button" value="minus" onclick="updateAmount(this.value);">
          -  
      </button>
      <span id="number">
       5
     </span>
    <button type="button" value="plus" onclick="updateAmount(this.value);">
     +  
   </button>    
  </form>
  <script>
    function updateAmount(value){ 
     var num = parseInt(document.getElementById('number').innerHTML);
    value=='plus'?num++:num--;
    document.getElementById('number').innerHTML = num;
    }
</script>
</html>

Answer 6

var minusBtn = document.querySelector('#minus');
var plusBtn = document.querySelector('#plus');

minusBtn.addEventListener('click', updateAmount('minus'));
plusBtn.addEventListener('click', updateAmount('plus'));

function updateAmount(action) {
  return function() {
   var numberElem = document.getElementById('number');
   var number = numberElem.innerText;
   number = parseInt(number, 10);
   if (action === 'minus') {
     number--;
   } else if(action === 'plus') {
     number++;
   } else {
     throw new Error('invalid operator');
   }
   numberElem.innerText = number;
 };
}


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

这是咖喱功能的一个很好的例子，您可以将updateAmount变为接受操作作为参数的一部分

Answer 7

你的代码只有两个小瑕疵，休息是完美的。首先，您的变量 num 正在评估 NaN 其次，您应该使用 textContent 而不是值。我正在分享正确的方法来评估num，然后它会起作用。

var el =document.getElementById('number')
var num = parseInt(el.textContent);

同样，在更新时

document.getElementById('number').textContent = num

希望它有所帮助。

两个按钮的一个功能（递增，递减）

7 个答案: