JavaScript How do I disable a button depending on a variable value?

I'm pretty new at JavaScript. I have a variable and two buttons to add or minus 1 from that variable, which works; However I want to make is so that when the variable = 0 the minus button disables, so the variable wont go below 0.

<head>
    <script type="text/javascript">
        var a = 0;
        var add = function(valueToAdd) {
            a += valueToAdd;
            document.getElementById('Value').innerHTML = a;
        }
    </script>
</head>
<body>
    Value:<span id="Value">0</span>
    <button type="button" id = add onclick="javascript:add(1)">+</button>
    <button type="button" id = minus onclick="javascript:add(-1)">-</button>
</body>
Answer:1
<head>
<script type="text/javascript">
    var a = 0;
    var add = function(valueToAdd){
        a += valueToAdd;
        document.getElementById('Value').innerHTML = a;

        if(a == 0) {
            document.getElementById('minus').disabled = true;
        } else {
            document.getElementById('minus').disabled = false;
        }
    }    

</script>

</head>

<body>
    Value:<span id="Value">0</span>
    <button type="button" id = add onclick="javascript:add(1)">+</button>
    <button type="button" id = minus onclick="javascript:add(-1)">-</button>


</body>
Answer:2

Something like:

a = Math.max(0, a+valueToAdd); // prevents a from dropping below 0
document.getElementById('minus').disabled = !a; // disables the minus button if a = 0
Answer:3

Use the disabled attribute:

var add = function(valueToAdd)
{
        document.getElementById('minus').disabled = (a+valueToAdd == 0);
        a += valueToAdd;
        document.getElementById('Value').innerHTML = a;
}
Answer:4

You can use the disabled attribute of the button element.

var a = 0;
var add = function(valueToAdd) {
    a += valueToAdd;
    document.getElementById('Value').innerHTML = a;

    // Add this line, it will disable when a is 0
    document.getElementById("minus").disabled = (a==0);
}

You should also update your button code. The javascript: handler is not required, and your id attributes should be quoted.

<button type="button" id="add" onclick="add(1)">+</button>
<button type="button" id="minus" onclick="add(-1)" disabled="disabled">-</button>

I have also added the disabled="disabled" to the minus button, because the initial value will be 0.

Answer:5

I have a progress bar, and I have my js getting the value of it with document.getElementsByTagName(progressbar)[num]. I have this in multiple functions, but when one of the progress bars are removed, ...

I have a progress bar, and I have my js getting the value of it with document.getElementsByTagName(progressbar)[num]. I have this in multiple functions, but when one of the progress bars are removed, ...

I have a question which I still haven't found the answer to. When I use this method to capture a mouse up event: <div onmouseup="/*Script to be executed*/"></div> Is that more ...

I have a question which I still haven't found the answer to. When I use this method to capture a mouse up event: <div onmouseup="/*Script to be executed*/"></div> Is that more ...

  1. javascript addeventlistener onmouseup
  2. window addeventlistener onmouseup
  3. js addeventlistener onmouseup
  4. document addeventlistener onmouseup

What is the purpose of the above line of code. I'm specifically confused by OR-ing the 'function() {}'. Why the empty function? To give a little more context to the line of code, here is the more ...

What is the purpose of the above line of code. I'm specifically confused by OR-ing the 'function() {}'. Why the empty function? To give a little more context to the line of code, here is the more ...

I've read half a dozen articles on improving performance with ng-repeat and so far I can't find a straight forward way at improving rendering of a simple bind once table. I've profiled various ...

I've read half a dozen articles on improving performance with ng-repeat and so far I can't find a straight forward way at improving rendering of a simple bind once table. I've profiled various ...