Как проверить есть ли в input текст?

Question

Я хочу добавить класс если в input есть текст.
Или удалить класс если текст будет стёрт из input.
Я написал данный код, он добавляет класс, но он не может проверить были стёрт текст.
Не понимаю как это сделать, прошу помочь. Только ванильный JS пожалуйста.

const doc = document;
const log = console.log;

const boxInp1 = doc.querySelector('.input-1');
const inp1 = doc.querySelector('.input-1__input');
const inp1val = inp1.value;

inp1.addEventListener('input', validate);

function validate() {
    if (inp1val.lenght !== 0) {
        // Если значение "boolean" = true
        boxInp1.classList.add('valid-btn');
        log('true')
    } else if (inp1val.lenght === 0) {
        // Если значение "boolean" = false
        boxInp1.classList.remove('valid-btn')
        log('false')
    };
}

<div class="inputs">
   <div class="input-1">
      <input class="input-1__input in1r rad16" type="text" placeholder="Ask your question">
   </div>
</div>

Answer 1

const doc = document;
const log = console.log;

const boxInp1 = doc.querySelector('.input-1');
const inp1 = doc.querySelector('.input-1__input');

inp1.addEventListener('input', validate);

function validate() {
  if (inp1.value.length) {
    // Если значение "boolean" = true
    boxInp1.classList.add('valid-btn');
    log('true')
  } else {
    // Если значение "boolean" = false
    boxInp1.classList.remove('valid-btn')
    log('false')
  };
}

.valid-btn {
  border: solid 1px green;
}

<div class="inputs">
  <div class="input-1">
    <input class="input-1__input in1r rad16" type="text" placeholder="Ask your question">
  </div>
</div>

БЛОГ НА HUSL

Как проверить есть ли в input текст?

Ответы (1 шт):