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

Question

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>

Last line of the add function: document.getElementById("minus").disabled = (a==0); — Scott
– Scott, Commented Jul 15, 2013 at 18:12

David Hellsing · Accepted Answer · 2013-07-15 18:25:31Z

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

edited Jul 15, 2013 at 18:25

answered Jul 15, 2013 at 18:15

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maxim Zhukov · Accepted Answer · 2013-07-15 18:13:13Z

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>

answered Jul 15, 2013 at 18:13

Maxim Zhukov

10.2k5 gold badges50 silver badges92 bronze badges

1 Comment

ObieMD5 Over a year ago

Also remember that since the intial value will be zero, This <button type="button" id = minus onclick="javascript:add(-1)">-</button> neeeds to be this: <button type="button" id = minus onclick="javascript:add(-1)" disabled>-</button>

David G · Accepted Answer · 2013-07-15 18:13:34Z

1

Use the disabled attribute:

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

answered Jul 15, 2013 at 18:13

David G

97.6k41 gold badges173 silver badges258 bronze badges

Comments

Scott · Accepted Answer · 2013-07-15 18:20:14Z

1

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.

edited Jul 15, 2013 at 18:20

answered Jul 15, 2013 at 18:13

Scott

21.6k8 gold badges67 silver badges73 bronze badges

Comments

Naftali · Accepted Answer · 2013-07-15 18:24:34Z

First: Please put quotes around your ids, and remove the inline js:

<button type="button" id="add">+</button>
<button type="button" id="minus">-</button>

var val = document.getElementById('Value');
var add = document.getElementById('add');
var subs = document.getElementById('minus');
var eventHandler = function(event) {
    var value = parseInt(val.innerText || val.innerHTML);
    if(this.id === 'add') { value++; }
    else if(this.id === 'minus') { value--;}
    val.innerHTML = value;
    if(value <= 0) {
        subs.disabled = true;
    }
    else {
        subs.disabled = false;
    }
};

Then hook the eventHandler into the buttons:

add.onclick = eventHandler;
subs.onclick = eventHandler;

Fiddle Demo: http://jsfiddle.net/maniator/wevG4/

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related