@cracker-test

Как отследить изменения полей?

на сайте есть два поля и кнопка. скажите, как можно сделать проверку, если оба поля заполнены, то кнопка красная, а если хотя бы одно не заполнено, то кнопка синяя
  • Вопрос задан
  • 68 просмотров
Пригласить эксперта
Ответы на вопрос 3
sergiks
@sergiks Куратор тега JavaScript
♬♬
на обоих полях слушать событие "input" — когда что-то меняется.

Обработчик этих событий один, общий.
Он проверяет, заполнены ли оба поля,
и добавляет/убирает атрибут disabled на кнопке
или меняет класс цвета кнопки.
Ответ написан
@kyzinatra
Можно через css, если через js нужно, то используй событие https://www.w3schools.com/jsref/event_oninput.asp
Oninput и проверяй значение полей, если соответствуют условиям, то ставь класс красной кнопке, если нет, то удаляй
Ответ написан
Комментировать
noder_ss
@noder_ss
Человек хороший, вёрстка по душе
Вот мой вариант. Работает по клику на кнопку отправки
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="" class="input">
    <input type="text" name="" id="" class="input">
    <input type="text" name="" id="" class="input">
    <input type="text" name="" id="" class="input">
    <input type="text" name="" id="" class="input">
    <input type="text" name="" id="" class="input">
    <input type="text" name="" id="" class="input">
    <input type="text" name="" id="" class="input">
    <input type="text" name="" id="" class="input">
    <input type="text" name="" id="" class="input">
<button class="btn">Отправить</button>
</body>
<script>
    let btn = document.querySelector(".btn")
    let inputs = Array.from(document.querySelectorAll(".input"))
    btn.onclick = function(){
     let newArray = inputs.filter(function(input){
         return input.value == ""
     })
     if(newArray == ""){
         btn.style.background = "skyblue"
     }
     else{
        btn.style.background = "tomato" 
     }
    }
</script>
</html>
Ответ написан
Ваш ответ на вопрос

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

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