Как поменять отдельно каждый input когда он берётся в фокус?

Question

[Keliorw]

Хочу сделать так что бы когда выделяешь окно ввода текста значение color менялось с rgba(0,0,0,0.3) на rgba(0,0,0,1), но у меня меняется только первый из 3-х input как мне сделать, что каждый менялся когда его выделаешь?

<form action="" method="POST" style="display: flex; flex-direction: column;">
                    <input type="text" name="name" placeholder="Введите ваше имя*" id="field-feedback" onfocus="swapOpacity()">
                    <input type="text" name="e-mail" placeholder="Введите ваш e-mail*" id="field-feedback" onfocus="swapOpacity()">
                    <input type="text" name="phone" placeholder="Введите ваш номер телефона*" id="field-feedback" onfocus="swapOpacity()">
                    <button type="submit" class="btn-feedback">Отправить данные</button>
                </form>

function swapOpacity() {
  document.getElementById('field-feedback').style.color = "rgba(0,0,0,1)";
}

Answer 1

[Ankhena]

Если вы не учите js, а хотите изменить инпут в фокусе, то используйте css

input:focus {
color: rgba(0,0,0,1);
}

А если учите js, то изучите querySelectorAll и forEach, а также браузерные события и пишите их в скрипте, а не в разметке, не делайте кашу из кода.
https://developer.mozilla.org/ru/docs/Web/API/Docu...
https://learn.javascript.ru/introduction-browser-events
https://learn.javascript.ru/array-methods

Comments

[Keliorw]

Как я понял из того что ты скинул
Этот код должен найти на странице все теги input с классом field-feedback и записать в массив, но у меня почему-то всё равно массив masInput остаётся пустым, почему так?

var masInput = document.querySelectorAll("input.field-feedback");

[Ankhena]

Keliorw, с чего вы взяли, что он пустой?
Смотрите, в консоли всё видно https://jsfiddle.net/60Laydhn/

[Keliorw]

хм, у меня почему-то длина равна 0, но по твоей ссылке равна 3

[Ankhena]

Keliorw, вы можете сделать свою песочницу и показать что там происходит.

[Keliorw]

Ankhena, У меня в песочнице работает, а у меня на сервере не работает 0_o

[Ankhena]

Keliorw, смотрите порядок подключения файлов

[WapSter]

Keliorw, во первых ты ищешь по классу, а в html у тебя id. Во вторых на странице не должно быть одинаковых id.

[Keliorw]

WapSter, я на классы поменял

[Keliorw]

Ankhena, всё получилось, спасибо))))

[Ankhena]

Keliorw, отлично.
Но же, такие задачи решайте css'ом ;)

Answer 2

[Тарас Шульга]

Поучить немного js да и html тоже.
1. На странице может быть только один уникальный ид.
2. Тут вы работаете с первый эл который находите, вам нужен масив.
3. И через event вызывать функцию (как пример.)

Answer 3

[hzzzzl]

https://developer.mozilla.org/ru/docs/Web/CSS/:focus

Comments

[Keliorw]

Благодарю за помощь))))

[Keliorw]

только теперь есть нюанс, когда я выделяю другое поле у меня предыдущее меняет свой цвет, но тот который был, а должно не меняться, если что-то введено