Не позволяйте кнопке уменьшать число после первого использования с 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;
  }
};