Форум

erilar · #1 (**permalink**) 13.01.2021, 02:22

Здравствуйте!
Попал в тупик. На странице есть 3 инпута

<input class="class_input" type="text" value="Инпут 1">
<input class="class_input" type="text" value="Инпут 2">
<input class="class_input" type="text" value="Инпут 3">

JS вытаскивает все инпуты с классом "class_input", а потом выводит в консоль их значения через запятую.

let inputs = document.querySelectorAll('.class_input');
let valInput  = [];
for (let index = 0; index < inputs.length; index++) {
  valInput.push(inputs[index].defaultValue);
}
valInput = valInput.join();
console.log(valInput);

Выходит: Инпут 1, Инпут 2, Инпут 3.
Всё норм.
Но если на странице изменить в значениях инпута текст и попытаться снова его вывести в логи, то выводится старые значения, а не то что мы ввели.
Как исправить эту проблему?

erilar · #2 (**permalink**) 13.01.2021, 04:06

Мда... Кодить в 3 часа ночи явно не нужно. Сам создал себе глупую ошибку.
valInput.push(inputs[index].defaultValue);
записывает изначальное значение.
Чтобы получить то, что мы вписываем в инпут нужно написать это:

valInput.push(inputs[index].value);

Спасибо всем за ответы и глупые вопросы "А зочем ето тебе нужна?", "А зочем тебе достоват из инпута валуе?"
Вопрос решен!

рони · #3 (**permalink**) 13.01.2021, 08:25

erilar,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>
<body>
<output></output>
<form action="http://" name="form">
<input class="class_input" type="text" value="Инпут 1">
<input class="class_input" type="text" value="Инпут 2">
<input class="class_input" type="text" value="Инпут 3">
</form>
<script>
 const showValue = _ => {
 let inputs = document.querySelectorAll('.class_input');
 let valInput = [...inputs].map(({value}) => value);
 document.querySelector('output').value = valInput
 }
 document.form.addEventListener("input", showValue);
 showValue();
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript