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

Question

cracker-test @cracker-test

JavaScript

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

на сайте есть два поля и кнопка. скажите, как можно сделать проверку, если оба поля заполнены, то кнопка красная, а если хотя бы одно не заполнено, то кнопка синяя

Вопрос задан более года назад
102 просмотра

2 комментария

Подписаться 2 Простой 2 комментария

Пригласить эксперта

Ответы на вопрос 3

2 комментария

Комментировать

5 комментариев

cracker-test @cracker-test Автор вопроса

а что сделать чтобы работало по изменению значения полей?

Написано более года назад
Noder SS @noder_ss

cracker-test, сейчас попробую переделать, если так легче

Написано более года назад

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.style.background = "tomato"
    inputs.forEach(input => {
    input.addEventListener("input", function(){
        let newArray = inputs.filter(function(input){
         return input.value == ""
     })
     if(newArray == ""){
         btn.style.background = "skyblue"
     }
     else{
        btn.style.background = "tomato" 
     }
    })
});

</script>

</html>

Если помог, отметьте решением, пожалуйста

Написано более года назад

Сергей delphinpro @delphinpro Куратор тега JavaScript

Noder SS,

let btn = document.querySelector(".btn")
let inputs = [...document.querySelectorAll(".input")];
btn.style.background = "tomato"
inputs.forEach(input => {
    input.addEventListener("input", () => {
        btn.style.background = inputs.every(input => input.value !== "")
            ? "skyblue"
            : "tomato";
    })
})

Написано более года назад

Noder SS @noder_ss

cracker-test, Решил вашу проблему?

Написано более года назад

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Простой
Как при мощи js создать поле дополнительных ингридиентов?
- 1 подписчик
- 6 часов назад
- 26 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как в Next.js закешировать изображение без build?
- 1 подписчик
- 8 часов назад
- 19 просмотров
0

ответов
JavaScript

Простой
Как поставить лайк на все комментарии видео в тикток?
- 1 подписчик
- 15 часов назад
- 120 просмотров
2

ответа
JavaScript

Простой
Как нажать на все блоки с данным классом на странице с помощью JS?
- 1 подписчик
- 16 часов назад
- 93 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как повторить такую же анимацию?
- 2 подписчика
- 17 часов назад
- 273 просмотра
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- 18 часов назад
- 102 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- 19 часов назад
- 52 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как сформировать маску, используя регулярное выражение?
- 1 подписчик
- 19 часов назад
- 74 просмотра
2

ответа
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- 23 часа назад
- 97 просмотров
2

ответа
JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Спарсить данные с сайта

26 апр. 2024, в 07:20

2000 руб./за проект

Devops для видео сервиса

26 апр. 2024, в 06:46

1000 руб./в час

Найти ошибку flutter_map

26 апр. 2024, в 05:31

1000 руб./за проект

На оба поля повесить обработчик события change или input, в котором проверять значения обоих полей и в зависимости от заполненности добавлять на кнопку класс, меняющий её цвет.

https://learn.javascript.ru/events-change-input
Вадим, change так-себе : ) Лучше таки input.

Answer 1 · 2023-01-25 08:55:51

на обоих полях слушать событие "input" — когда что-то меняется.

Обработчик этих событий один, общий.
Он проверяет, заполнены ли оба поля,
и добавляет/убирает атрибут disabled на кнопке
или меняет класс цвета кнопки.

Answer 2 · 2023-01-25 08:57:42

Можно через css, если через js нужно, то используй событие https://www.w3schools.com/jsref/event_oninput.asp
Oninput и проверяй значение полей, если соответствуют условиям, то ставь класс красной кнопке, если нет, то удаляй

Answer 3 · 2023-01-25 12:22:56

Вот мой вариант. Работает по клику на кнопку отправки

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

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

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

Минуточку внимания

Войдите на сайт