iNext10
@iNext10
Web Developing (Front End) Junior

Как сделать так, чтобы при изменении Input'a менялся атрибут 'disabled' у кнопки?

Есть вот такой сайт:
5e6fa67001fcf054681948.png
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="Введите число..." id="firstInput"> +
    <input type="text" placeholder="Введите число..." id="secondInput"> =
    <input type="text" id="result">
    <div class="btns" style="margin-top: 10px;">
        <input type="button" value="Результат" id="resultBtn"> 
        <input type="button" value="Очистить" id="clearBtn"> 
    </div>
    <script src="script.js"></script>
</body>
</html>


А вот JS код:

let firstInput = document.querySelector('#firstInput');
let secondInput = document.querySelector('#secondInput');
let thirdInput = document.querySelector('#result'); thirdInput.disabled = true;
let resultBtn = document.querySelector('#resultBtn');
let clearBtn = document.querySelector('#clearBtn');
resultBtn.addEventListener('click', showResult);
clearBtn.addEventListener('click', clearAll);

function showResult() {
    thirdInput.value = Number(firstInput.value) + Number(secondInput.value);
}

function clearAll() {
    firstInput.value = '';
    secondInput.value = '';
    thirdInput.value = '';  
}


Помогите сделать так, чтобы если firstInput и secondInput пустые, то кнопка "Очистить" была disabled = true. В ином случае, если пользователь хотя-бы в 1 из этих инпутов ввёл текст, то кнопка "Очистить" была disabled = false.
  • Вопрос задан
  • 70 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
const inputs = [ firstInput, secondInput ];
const onInput = () => clearBtn.disabled = !inputs.some(n => n.value);
inputs.forEach(n => n.addEventListener('input', onInput));
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
TAbrahamyan
@TAbrahamyan
if (!firstInput.value && !secondInput.value) {
  clearBtn.disabled = true;
}

[firstInput, secondInput].forEach(input => {
  input.addEventListener("input", function() {
    clearBtn.disabled = (!firstInput.value && !secondInput.value);
  })
})
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы