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>
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>
- ok so what did you do? – Naftali Commented Jul 15, 2013 at 18:10
-
1
Last line of the add function:
document.getElementById("minus").disabled = (a==0);– Scott Commented Jul 15, 2013 at 18:12
5 Answers
Reset to default 2Something 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
<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>
Use the disabled attribute:
var add = function(valueToAdd)
{
document.getElementById('minus').disabled = (a+valueToAdd == 0);
a += valueToAdd;
document.getElementById('Value').innerHTML = a;
}
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.
First: Please put quotes around your ids, and remove the inline js:
<button type="button" id="add">+</button>
<button type="button" id="minus">-</button>
Next:
Write an event handler for the button clicks:
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/maniator/wevG4/