Keep button from decrementing a number after 1st use with Javascript

Question

I'm trying to keep track of the number of items a user has clicked on by removing one from the counter span using a basic JS function. I have to keep track of anywhere between 5 to 10 items so each time the button is clicked I am removing one from the div span that keeps count. It's working but I do not want it going to negative values. How do I keep the button from removing 1 after it has been used once? Basically, I want the function to only fire once for each button.

Here is the codepen as it is now: CODEPEN

Here is what I have right now:

    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>

you could remove the button. http://stackoverflow.com/questions/3387427/javascript-remove-element-by-id — lukadante3, Sep 01 '14 at 19:41
I have to keep the button. This is bare-bones for the rest of the experience. The button will be bound to some show/hide logic as well. I guess I could remove the button then append a new button to the empty div container and redo the behavior. — isaac weathers, Sep 01 '14 at 19:48
you could also disable it if you need to keep it. http://stackoverflow.com/questions/3014649/how-to-disable-html-button-using-javascript — lukadante3, Sep 01 '14 at 19:51

score 1 · Answer 1 · answered Sep 01 '14 at 21:21

You have great interest in inserting the buttons programmatically, you'll have a much greater flexibility. And you can hook the function to a function that you bind to have the right this . Below is the code for buttons that handle a 'quantity' property, and disable themselves when quantity reaches 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>

code :

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

That works for if I could disable the button but I need to keep it alive. I know that I can mod the HTML with jquery on click, can I remove the JS from that button as well? — isaac weathers, Sep 02 '14 at 00:14
What is the behavior you expect when you click on a button that has already been clicked ? — GameAlchemist, Sep 02 '14 at 07:30

Keep button from decrementing a number after 1st use with Javascript

1 Answers1