CODEWITHSUNDEEP
javascripthtmlcss
Stanley Bateswar
Stanley Bateswar

Reputation: 125

Disable button only when text input is 0

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?

Upvotes: 2

Views: 1310

Answers (5)

Donnie Nosayaba Imafidon
Donnie Nosayaba Imafidon

Reputation: 93

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

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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">

Upvotes: 1

silverfighter
silverfighter

Reputation: 6882

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">

Upvotes: 0

Igor Felipe
Igor Felipe

Reputation: 1

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

try this way: 

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

Upvotes: 0

Andrew Ault
Andrew Ault

Reputation: 579

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

Upvotes: 0

Related Questions