Disable button only when text input is 0

Question

I have the following code:

var total = document.getElementById('total--input');

document.getElementById('btn-increment-total').addEventListener('click', function() {
  if (total.value > 1) {
    console.log('enabled');
    document.getElementById('btn-decrement-total').enabled = true;
  }

  total.value++;
});

document.getElementById('btn-decrement-total').addEventListener('click', function() {
  if (total.value == 0) {
    console.log('disabled');
    document.getElementById('btn-decrement-total').disabled = true;
  }

  total.value--;
});

<button id="btn-increment-total">plus</button>
<button id="btn-decrement-total">min</button>
<input type="text" id="total--input" value="1">

The 'decrement' button seems to work and will disable itself when conditions are met.

But the 'increment' button doesn't seem to re-enable the 'decrement' button. Anyone knows why and how to solve this?

Beside of rearrange your code you must know that the value of input text is a string. — A. Meshu
– A. Meshu, Commented Oct 3, 2018 at 18:32
Where is total defined? Why are you incrementing after you check it? There is no enabled property. — epascarello
– epascarello, Commented Oct 3, 2018 at 18:37
I edited to actually make the 'Run code snippet' to a 'working' state - BUT, you should be doing total.value++ and total.value-- first before checking if total.value is > 1 to increment, and == 0 to decrement. I don't intend to fix your code though, because it seems that what's more relevant is your misunderstanding of the .enabled property - it simply does not exist. Short answer: you simply just need to set the disabled property to either true or false depending on the condition. Make sense? — Terry Young
– Terry Young, Commented Oct 3, 2018 at 19:06
For long answer PLUS a working bug fix, I suggest Zakaria Acharki's answer below - you increment/decrement the value FIRST, THEN you check the UPDATED value to see if you need to set disabled to true/false. — Terry Young
– Terry Young, Commented Oct 3, 2018 at 19:13

Zakaria Acharki · Accepted Answer · 2018-10-03 19:51:40Z

1

There's no enabled attribute, you should use disable="false" :

document.getElementById('btn-decrement-total').disabled = false;

Instead of:

document.getElementById('btn-decrement-total').enabled = true;
_______________________________________________^^^^^^^

Working sample:

var total = document.getElementById('total--input');

document.getElementById('btn-increment-total').addEventListener('click', function() {
  total.value++;

  if (total.value > 0) {
    console.log('enabled');
    document.getElementById('btn-decrement-total').disabled = false;
  }

});

document.getElementById('btn-decrement-total').addEventListener('click', function() {
  total.value--;

  if (total.value == 0) {
    console.log('disabled');
    document.getElementById('btn-decrement-total').disabled = true;
  }
});

<button id="btn-increment-total">plus</button>
<button id="btn-decrement-total">min</button>
<input type="text" id="total--input" value="1">

edited Oct 3, 2018 at 19:51

answered Oct 3, 2018 at 18:31

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

3 Comments

Stanley Bateswar Over a year ago

Sorry I did asign the input in a const const total = document.querySelector("#total--input"); But when I want to increment it still shows me -1 and than the button is disabled. Beside that when I want to increment the button is enabled when the input value is 2. How can I fix this issue?

Zakaria Acharki Over a year ago

Have you checked the condition in the working snippet ??

Zakaria Acharki Over a year ago

Congratulations, @Stanley you've earned the VoteUp privilege consider to use it if any answer helps you, if any answer from the posted here is what you're looking for Mark it as the correct answer For the future readers.

Andrew Ault · Accepted Answer · 2018-10-03 18:31:32Z

0

enabled isn't a valid attribute, use disabled = false instead

answered Oct 3, 2018 at 18:31

Andrew Ault

5793 silver badges12 bronze badges

Comments

Igor Felipe · Accepted Answer · 2018-10-03 18:32:47Z

0

You need to assign the input in an var/let or const.

try this way:

const total = document.querySelector("#total--input");

answered Oct 3, 2018 at 18:32

Igor Felipe

1

1 Comment

Igor Felipe Over a year ago

before the if statement**

silverfighter · Accepted Answer · 2018-10-03 19:47:10Z

I had to add an return statement and change some lines of code but this should work.

 const disableBtn = function (id, mode) {
      document.getElementById(id).disabled = mode;
    };


document.getElementById('btn-increment-total').addEventListener('click', function () {
  let total = document.getElementById('total--input');

  if (total.value >= 0) {
    disableBtn('btn-decrement-total', false);

  }
  total.value++;

});

document.getElementById('btn-decrement-total').addEventListener('click', function () {
  var total = document.getElementById('total--input');
  total.value--;
  if (total.value <= 0) {
    disableBtn('btn-decrement-total', true);
    return
  }

});



<button id="btn-increment-total">plus</button>
<button id="btn-decrement-total">min</button>
<input type="text" id="total--input" value="1">

Donnie Nosayaba Imafidon · Accepted Answer · 2018-10-04 09:40:25Z

0

Try to parse the value from the input element to integer before comparing values...

var n1 = Number(document.getElementById('input_element').value).

Then you can check if it meets the condition

answered Oct 4, 2018 at 9:40

Donnie Nosayaba Imafidon

938 bronze badges

Collectives™ on Stack Overflow

Disable button only when text input is 0

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related