在第一次使用 Javascript 后保持按钮不会减少数字

Question

我试图通过使用基本的 JS 函数从计数器跨度中删除一个来跟踪用户单击的项目数。我必须跟踪 5 到 10 个项目之间的任何位置，因此每次单击按钮时，我都会从保持计数的 div 范围中删除一个。它正在工作，但我不希望它变成负值。如何防止按钮在使用一次后移除 1？基本上，我希望每个按钮只触发一次函数。

这是现在的代码笔： CODEPEN

这是我现在拥有的：

    var currentValue = 9;
    var add = function(valueToAdd){
        currentValue += valueToAdd;
        document.getElementById('number').innerHTML = currentValue;
        if (this.currentValue == 0) {
            alert("YOU ARE AT 0 ");
            currentValue - 0
        }
        if (!isNaN(currentValue) && currentValue > 0) {
            // Decrement one
            currentValue - 1;
        } else {
            return false;
        }
    };

HTML：

<div id="text">Number of items:<span id="number">9</span><div>

<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>

Answer 1

您对以编程方式插入按钮非常感兴趣，您将拥有更大的灵活性。并且您可以将该函数挂钩到您绑定到具有正确 this 的函数。 下面是处理“数量”属性并在数量达到 0 时禁用自身的按钮的代码。

http://codepen.io/anon/pen/gJtry

<div id="text">Number of items:<span id="number">9</span>

<div id="oneTimeButtons">
</div>

<div id='youDidIt' hidden>!!! You did it !!!</div>

代码：

var buttonCount = 9;
var quantityPerButton = 1; // try 2 or more

var totalValue = 0;

var gID=document.getElementById.bind(document);
var elem = gID('oneTimeButtons');

for (var i=0; i<buttonCount; i++) {
  var bt = document.createElement('button');
  bt.id='qttBt'+i;
  bt.onclick = add.bind(bt, -1);
  bt.quantity=quantityPerButton;
  totalValue+=bt.quantity;
  bt.buildTitle = function( i) {
     this.innerHTML='Qtty button '+i+' ('+this.quantity+')';    
  }.bind(bt, i);
  bt.buildTitle();
  elem.appendChild(bt);
}
gID('number').innerHTML=totalValue;

function add (valueToAdd) {
  this.quantity+=valueToAdd;
  this.buildTitle();
  if (this.quantity ==0) this.disabled=true;
  totalValue += valueToAdd;
  gID('number').innerHTML = totalValue;
  if (totalValue == 0) {
    console.log("YOU ARE AT 0 ");
    gID('youDidIt').hidden=false;
  }
};