How to disable a html subtraction button when the value is 0?
So I've tried all over the internet for an answer and have been unable to come up with the correct answer.
My code:
HTML
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th>
<span id="strength"></span>
</th>
JS:
function subStrength()
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
javascript html css button
add a comment |
So I've tried all over the internet for an answer and have been unable to come up with the correct answer.
My code:
HTML
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th>
<span id="strength"></span>
</th>
JS:
function subStrength()
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
javascript html css button
add a comment |
So I've tried all over the internet for an answer and have been unable to come up with the correct answer.
My code:
HTML
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th>
<span id="strength"></span>
</th>
JS:
function subStrength()
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
javascript html css button
So I've tried all over the internet for an answer and have been unable to come up with the correct answer.
My code:
HTML
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th>
<span id="strength"></span>
</th>
JS:
function subStrength()
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
javascript html css button
javascript html css button
edited Nov 12 '18 at 3:03
Dacre Denny
12.3k41031
12.3k41031
asked Nov 12 '18 at 2:59
Mr. Student.exeMr. Student.exe
103
103
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
One approach to this would be to call the setAttribute()
or removeAttribute()
methods on the button element to toggle the disabled/enabled state of the button depending on the value of the strength
variable:
var strength = 0;
document.getElementById("strength").innerHTML = strength;
function updateButtonDisabled()
// If strength less than equal zero disable the button
if(strength <= 0)
document.getElementById("subButton").setAttribute('disabled', 'disabled');
else
document.getElementById("subButton").removeAttribute('disabled');
function subStrength()
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th>
<span id="strength"></span>
</th>
<th scope="col">
<button class="button" type="button"
onclick="addStrength();" value="add">+</button>
</th>
Thanks so much! This has been incredibly helpful and solved my problem. Now it's just a matter of rearranging it to have the value in the centre.
– Mr. Student.exe
Nov 12 '18 at 3:45
@Mr.Student.exe you're welcome - just a moment, I'll update the answer to show how that can be done
– Dacre Denny
Nov 12 '18 at 3:45
@Mr.Student.exe does that help?
– Dacre Denny
Nov 12 '18 at 3:46
Oh yeah, it did, only problem I'm facing is converting it to other attributes, like agility. It displays NaN. Any help there?
– Mr. Student.exe
Nov 14 '18 at 0:00
add a comment |
You should be able to do:
if (strength === 0)
document.getElementById('subButton').disabled = true;
in subStrength.
Just make sure to set disabled = false if strength > 0 in addStrength!
add a comment |
First you need to have a default value for the strength. Here is my working code :
strength = 5;
function subStrength()
if(strength>0)
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
if(strength==0)
document.getElementById("subButton").disabled = true;
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
if(strength>0)
document.getElementById("subButton").disabled = false;
<table>
<thead>
<tr>
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th scope="col">
<button class="button" type="button"
onclick="addStrength();" value="add">+</button>
</th>
<th>
<span id="strength"></span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53255442%2fhow-to-disable-a-html-subtraction-button-when-the-value-is-0%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
One approach to this would be to call the setAttribute()
or removeAttribute()
methods on the button element to toggle the disabled/enabled state of the button depending on the value of the strength
variable:
var strength = 0;
document.getElementById("strength").innerHTML = strength;
function updateButtonDisabled()
// If strength less than equal zero disable the button
if(strength <= 0)
document.getElementById("subButton").setAttribute('disabled', 'disabled');
else
document.getElementById("subButton").removeAttribute('disabled');
function subStrength()
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th>
<span id="strength"></span>
</th>
<th scope="col">
<button class="button" type="button"
onclick="addStrength();" value="add">+</button>
</th>
Thanks so much! This has been incredibly helpful and solved my problem. Now it's just a matter of rearranging it to have the value in the centre.
– Mr. Student.exe
Nov 12 '18 at 3:45
@Mr.Student.exe you're welcome - just a moment, I'll update the answer to show how that can be done
– Dacre Denny
Nov 12 '18 at 3:45
@Mr.Student.exe does that help?
– Dacre Denny
Nov 12 '18 at 3:46
Oh yeah, it did, only problem I'm facing is converting it to other attributes, like agility. It displays NaN. Any help there?
– Mr. Student.exe
Nov 14 '18 at 0:00
add a comment |
One approach to this would be to call the setAttribute()
or removeAttribute()
methods on the button element to toggle the disabled/enabled state of the button depending on the value of the strength
variable:
var strength = 0;
document.getElementById("strength").innerHTML = strength;
function updateButtonDisabled()
// If strength less than equal zero disable the button
if(strength <= 0)
document.getElementById("subButton").setAttribute('disabled', 'disabled');
else
document.getElementById("subButton").removeAttribute('disabled');
function subStrength()
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th>
<span id="strength"></span>
</th>
<th scope="col">
<button class="button" type="button"
onclick="addStrength();" value="add">+</button>
</th>
Thanks so much! This has been incredibly helpful and solved my problem. Now it's just a matter of rearranging it to have the value in the centre.
– Mr. Student.exe
Nov 12 '18 at 3:45
@Mr.Student.exe you're welcome - just a moment, I'll update the answer to show how that can be done
– Dacre Denny
Nov 12 '18 at 3:45
@Mr.Student.exe does that help?
– Dacre Denny
Nov 12 '18 at 3:46
Oh yeah, it did, only problem I'm facing is converting it to other attributes, like agility. It displays NaN. Any help there?
– Mr. Student.exe
Nov 14 '18 at 0:00
add a comment |
One approach to this would be to call the setAttribute()
or removeAttribute()
methods on the button element to toggle the disabled/enabled state of the button depending on the value of the strength
variable:
var strength = 0;
document.getElementById("strength").innerHTML = strength;
function updateButtonDisabled()
// If strength less than equal zero disable the button
if(strength <= 0)
document.getElementById("subButton").setAttribute('disabled', 'disabled');
else
document.getElementById("subButton").removeAttribute('disabled');
function subStrength()
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th>
<span id="strength"></span>
</th>
<th scope="col">
<button class="button" type="button"
onclick="addStrength();" value="add">+</button>
</th>
One approach to this would be to call the setAttribute()
or removeAttribute()
methods on the button element to toggle the disabled/enabled state of the button depending on the value of the strength
variable:
var strength = 0;
document.getElementById("strength").innerHTML = strength;
function updateButtonDisabled()
// If strength less than equal zero disable the button
if(strength <= 0)
document.getElementById("subButton").setAttribute('disabled', 'disabled');
else
document.getElementById("subButton").removeAttribute('disabled');
function subStrength()
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th>
<span id="strength"></span>
</th>
<th scope="col">
<button class="button" type="button"
onclick="addStrength();" value="add">+</button>
</th>
var strength = 0;
document.getElementById("strength").innerHTML = strength;
function updateButtonDisabled()
// If strength less than equal zero disable the button
if(strength <= 0)
document.getElementById("subButton").setAttribute('disabled', 'disabled');
else
document.getElementById("subButton").removeAttribute('disabled');
function subStrength()
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th>
<span id="strength"></span>
</th>
<th scope="col">
<button class="button" type="button"
onclick="addStrength();" value="add">+</button>
</th>
var strength = 0;
document.getElementById("strength").innerHTML = strength;
function updateButtonDisabled()
// If strength less than equal zero disable the button
if(strength <= 0)
document.getElementById("subButton").setAttribute('disabled', 'disabled');
else
document.getElementById("subButton").removeAttribute('disabled');
function subStrength()
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th>
<span id="strength"></span>
</th>
<th scope="col">
<button class="button" type="button"
onclick="addStrength();" value="add">+</button>
</th>
edited Nov 12 '18 at 3:52
answered Nov 12 '18 at 3:10
Dacre DennyDacre Denny
12.3k41031
12.3k41031
Thanks so much! This has been incredibly helpful and solved my problem. Now it's just a matter of rearranging it to have the value in the centre.
– Mr. Student.exe
Nov 12 '18 at 3:45
@Mr.Student.exe you're welcome - just a moment, I'll update the answer to show how that can be done
– Dacre Denny
Nov 12 '18 at 3:45
@Mr.Student.exe does that help?
– Dacre Denny
Nov 12 '18 at 3:46
Oh yeah, it did, only problem I'm facing is converting it to other attributes, like agility. It displays NaN. Any help there?
– Mr. Student.exe
Nov 14 '18 at 0:00
add a comment |
Thanks so much! This has been incredibly helpful and solved my problem. Now it's just a matter of rearranging it to have the value in the centre.
– Mr. Student.exe
Nov 12 '18 at 3:45
@Mr.Student.exe you're welcome - just a moment, I'll update the answer to show how that can be done
– Dacre Denny
Nov 12 '18 at 3:45
@Mr.Student.exe does that help?
– Dacre Denny
Nov 12 '18 at 3:46
Oh yeah, it did, only problem I'm facing is converting it to other attributes, like agility. It displays NaN. Any help there?
– Mr. Student.exe
Nov 14 '18 at 0:00
Thanks so much! This has been incredibly helpful and solved my problem. Now it's just a matter of rearranging it to have the value in the centre.
– Mr. Student.exe
Nov 12 '18 at 3:45
Thanks so much! This has been incredibly helpful and solved my problem. Now it's just a matter of rearranging it to have the value in the centre.
– Mr. Student.exe
Nov 12 '18 at 3:45
@Mr.Student.exe you're welcome - just a moment, I'll update the answer to show how that can be done
– Dacre Denny
Nov 12 '18 at 3:45
@Mr.Student.exe you're welcome - just a moment, I'll update the answer to show how that can be done
– Dacre Denny
Nov 12 '18 at 3:45
@Mr.Student.exe does that help?
– Dacre Denny
Nov 12 '18 at 3:46
@Mr.Student.exe does that help?
– Dacre Denny
Nov 12 '18 at 3:46
Oh yeah, it did, only problem I'm facing is converting it to other attributes, like agility. It displays NaN. Any help there?
– Mr. Student.exe
Nov 14 '18 at 0:00
Oh yeah, it did, only problem I'm facing is converting it to other attributes, like agility. It displays NaN. Any help there?
– Mr. Student.exe
Nov 14 '18 at 0:00
add a comment |
You should be able to do:
if (strength === 0)
document.getElementById('subButton').disabled = true;
in subStrength.
Just make sure to set disabled = false if strength > 0 in addStrength!
add a comment |
You should be able to do:
if (strength === 0)
document.getElementById('subButton').disabled = true;
in subStrength.
Just make sure to set disabled = false if strength > 0 in addStrength!
add a comment |
You should be able to do:
if (strength === 0)
document.getElementById('subButton').disabled = true;
in subStrength.
Just make sure to set disabled = false if strength > 0 in addStrength!
You should be able to do:
if (strength === 0)
document.getElementById('subButton').disabled = true;
in subStrength.
Just make sure to set disabled = false if strength > 0 in addStrength!
answered Nov 12 '18 at 3:08
jacob.mccrumbjacob.mccrumb
511216
511216
add a comment |
add a comment |
First you need to have a default value for the strength. Here is my working code :
strength = 5;
function subStrength()
if(strength>0)
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
if(strength==0)
document.getElementById("subButton").disabled = true;
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
if(strength>0)
document.getElementById("subButton").disabled = false;
<table>
<thead>
<tr>
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th scope="col">
<button class="button" type="button"
onclick="addStrength();" value="add">+</button>
</th>
<th>
<span id="strength"></span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
add a comment |
First you need to have a default value for the strength. Here is my working code :
strength = 5;
function subStrength()
if(strength>0)
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
if(strength==0)
document.getElementById("subButton").disabled = true;
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
if(strength>0)
document.getElementById("subButton").disabled = false;
<table>
<thead>
<tr>
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th scope="col">
<button class="button" type="button"
onclick="addStrength();" value="add">+</button>
</th>
<th>
<span id="strength"></span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
add a comment |
First you need to have a default value for the strength. Here is my working code :
strength = 5;
function subStrength()
if(strength>0)
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
if(strength==0)
document.getElementById("subButton").disabled = true;
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
if(strength>0)
document.getElementById("subButton").disabled = false;
<table>
<thead>
<tr>
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th scope="col">
<button class="button" type="button"
onclick="addStrength();" value="add">+</button>
</th>
<th>
<span id="strength"></span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
First you need to have a default value for the strength. Here is my working code :
strength = 5;
function subStrength()
if(strength>0)
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
if(strength==0)
document.getElementById("subButton").disabled = true;
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
if(strength>0)
document.getElementById("subButton").disabled = false;
<table>
<thead>
<tr>
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th scope="col">
<button class="button" type="button"
onclick="addStrength();" value="add">+</button>
</th>
<th>
<span id="strength"></span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
strength = 5;
function subStrength()
if(strength>0)
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
if(strength==0)
document.getElementById("subButton").disabled = true;
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
if(strength>0)
document.getElementById("subButton").disabled = false;
<table>
<thead>
<tr>
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th scope="col">
<button class="button" type="button"
onclick="addStrength();" value="add">+</button>
</th>
<th>
<span id="strength"></span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
strength = 5;
function subStrength()
if(strength>0)
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
if(strength==0)
document.getElementById("subButton").disabled = true;
function addStrength()
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
if(strength>0)
document.getElementById("subButton").disabled = false;
<table>
<thead>
<tr>
<th scope="col">
<button class="button" type="button" id="subButton"
onclick="subStrength();" value="subtract">-</button>
</th>
<th scope="col">
<button class="button" type="button"
onclick="addStrength();" value="add">+</button>
</th>
<th>
<span id="strength"></span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
answered Nov 12 '18 at 3:48
Ishmam Haque BhuiyanIshmam Haque Bhuiyan
3010
3010
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53255442%2fhow-to-disable-a-html-subtraction-button-when-the-value-is-0%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown