CODEWITHSUNDEEP
javascripthtmljquery
AWEI
AWEI

Reputation: 427

How to use javascript to increase or decrease the disabled attribute according to whether there is a value in the input box

I hope to cancel the disabled property of btn when there is a value in the input box, and increase disabled when the input box has no value, but I have encountered a situation, when I delete the value in the input box, why the button still does not increase the disabled?

let inputDOM = document.querySelector('.input');
let BtnDOM = document.querySelector('.btn');

inputDOM.addEventListener('input', function() {
  console.log(inputDOM.value)
  if (inputDOM.value >= 0) {
    BtnDOM.removeAttribute("disabled")
  } else if (inputDOM.value == "") {
    BtnDOM.setAttribute("disabled", "")
  }
});
<input type="number" class="input">
<button class="btn" disabled>Enter</button>

Upvotes: 0

Views: 56

Answers (1)

The beginner guy
The beginner guy

Reputation: 58

let inputDOM = document.querySelector('.input');
let BtnDOM = document.querySelector('.btn');

inputDOM.addEventListener('input', function() {
  console.log(inputDOM.value)
  if (inputDOM.value.length > 0) {
    BtnDOM.removeAttribute("disabled")
  } else if (inputDOM.value.length <= 0 ) {
    BtnDOM.setAttribute("disabled", "true")
  }
});
<input type="number" class="input">
<button class="btn" disabled>Enter</button>

Upvotes: 1

Related Questions