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

Question

cracker-test @cracker-test

JavaScript

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

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

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

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

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

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

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

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, Решил вашу проблему?

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

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

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

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

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

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

JavaScript

+2 ещё

Простой
Как сделать универсальную HTML-ссылку на яндекс карты?
- 1 подписчик
- 12 часов назад
- 73 просмотра
0

ответов
JavaScript

Простой
Как отправить данные JSON полученные в fetch в html таблицу?
- 1 подписчик
- 15 часов назад
- 63 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Дергается анимация снега, почему и как исправить?
- 1 подписчик
- 22 часа назад
- 131 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Как открыть CSS селектор при помощи onclick?
- 1 подписчик
- вчера
- 96 просмотров
1

ответ
JavaScript

Простой
Как исправить ошибку «Uncaught ReferenceError: $ is not defined» хотя jQuery подключен?
- 1 подписчик
- вчера
- 79 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как убрать экспоненциальную запись числа в input type=number?
- 1 подписчик
- вчера
- 90 просмотров
1

ответ
JavaScript

Простой
Как запустить проверку? try catch?
- 1 подписчик
- вчера
- 84 просмотра
1

ответ
JavaScript

Простой
Почему не работает проверка формы на валидность?
- 1 подписчик
- вчера
- 69 просмотров
1

ответ
JavaScript

Простой
Почему массив заполняется одним и тем же объектом?
- 1 подписчик
- 15 дек.
- 139 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как дебажить telegram mini app?
- 1 подписчик
- 15 дек.
- 163 просмотра
2

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

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

div. • Ставрополь

от 40 000 до 90 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Несложная верстка из Figma bootstrap5 scss npm

18 дек. 2024, в 04:59

1000 руб./в час

Отправка команды на открытие всех окон автомобиля Chery Tiggo 7 Pro

18 дек. 2024, в 03:28

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

Установить музыкальный софт

18 дек. 2024, в 01:04

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

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

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

Answer 1 · 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>

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

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

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

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

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

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

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

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

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