Как сделать чтобы каждый ввод имени добавлялся в массив и сохранялся, и в последствии по нажатию кнопки показывал весь список?
Пытался сам сделать обычный массив, не смог додумать как именно сделать так чтобы каждый ввод имени добавлялся в массив и сохранялся, и в последствии по нажатию кнопки показывал весь список внесенных студентов
<div id="forms"> <input id="name" type="text" placeholder="Имя"> <input id="surname" type="text" placeholder="Фамилия"> <input id="age" type="text" placeholder="Возраст"> <button type="button" name="button" id="button" value="submit" onclick="getArr()">Button</button> </div> <script> function getArr() { let inputAll = Array.from(document.querySelectorAll('#forms input')); let arr = []; let obj = {}; let checkFieldsLength = inputAll.every((el) => el.value.length); if (checkFieldsLength) { for (const input of inputAll) { obj[input.id] = input.value; } arr.push(obj); return console.log(arr); } return alert('Не все поля заполнены'); } </script>ПрограммированиеJavascript+3
Что ж, вам уже дали правильный ответ несколько раз, давайте посмотрим в дидактических целях весь процесс решения подобной задачи.
Итак, от нас требуется:
- веб-страница;
- на которой можно вводить имена, одно за другим;
- эти имена сохраняются в массив (видимо, это важно);
- все сохранённые имена показываются отдельно списком;
- ввод имени производится кнопкой.
Делаем HTML5 страницу:
<!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>
<!-- решение вставлять сюда -->
</body>
</html>Ну да, а вы как думали? HTML5 страница выглядит так.
Все строчки кода дальше по тексту будут вставлены в этот каркас на место комментария, одна за другой.
Нам нужно что-то, способное выводить имена из массива в список. Для этого в HTML есть элемент `ul`, которому мы сразу зададим ID, чтобы поцелить его в дальнейшем из Javascript:
<ul id="names-list"></ul>Дальше нам нужно что-то, что позволит нам "вводить имена". Для "ввода" в HTML есть концепция "форм", и браузеры поддерживают очень много функциональности, связанной с формами, автоматически (нам не нужно всё это писать руками). Нет смысла не использовать формы для ввода. Нам сказано, что надо уметь вводить имена, и нам нужна ещё кнопка в явном виде, ОК, вот они:
<form id="names-input-form">
<input type="text" />
<button type="submit">Ввести</button>
</form>Итого вот наш интерфейс:
Дальше сказано, что нам нужно сохранять имена в массив, значит, нам нужен яваскрипт в нашем коде, хорошо:
<script>
const names = [];
// Дальше код пишем сюда
</script>Переменная `names` будет всегда содержать только этот массив и мы никогда её не перезапишем ничем другим. Ни `var`, ни `let` здесь не нужны, используем ключевое слово `const`.
Весь код, который я дальше напишу, нужно вставлять на место комментария, строчка за строчкой.
Что от нас требуют фундаментально, что является желаемым поведением нашей программы? Правильно, "в ответ на ввод имени должно что-то происходить". Значит, нам нужно добавить к форме обработчик события "заполнено". Мы могли бы напрямую добавить обработчик нажатия на кнопку, но как я уже выше сказал, в современных браузерах есть столько стандартного поведения для форм, что есть смысл сразу привыкнуть полагаться на него.
Нам нужно найти в документе нашу форму, для чего в DOM API есть метод `getElementById`, и добавить к найденной форме обработчик события `submit`. ОК, без проблем:
document
.getElementById("names-input-form")
.addEventListener("submit", добавитьИмяВСписок);Да, я назвал функцию-обработчик события кириллицей, и что? И что вы мне сделаете? 😏
Теперь создадим эту функцию `добавитьИмяВСписок`. Для простоты повествования я воспользуюсь тем, что классические функции в жабоскрипте можно объявлять в любом порядке, они все в момент выполнения кода будут доступны. Поэтому как я и сказал выше, пишите дальнейшие строчки кода прямо дальше по тексту программы. Вот каркас нашей функции:
function добавитьИмяВСписок(event) {
// дальше код пишем сюда
}Все дальнейшие строчки кода, которые я буду показывать, пишем одну за другой на место показанного комментария.
Так как наша функция - это обработчик события, нам известно, что она получает на вход один аргумент, который мы традиционно называем event. Более того, из стандарта DOM API мы также знаем, что значением этого аргумента будет являться объект типа SubmitEvent. Первое, что нужно сделать в нашей функции — отключить стандартное поведение формы в ответ на это событие, потому что стандартное поведение — это отправка запроса на страницу, указанную в атрибуте `action` этой формы. У нашей формы там ничего не написано, что приведёт к перезагрузке страницы, что нам не надо — нам нужно сохранять список имён после каждого заполнения формы.
Поэтому пишем первой строчкой в функцию:
event.preventDefault();Дальше нам нужно получить то, что было введено в поле ввода — имя. У нас есть много способов разной сложности выковырять это значение, начиная с объекта в аргументе `event`, но для простоты воспользуюсь самым прямолинейным (и грубым): найду наш `input` на странице по его идентификатору.
const input = document.getElementById("name-input");
const name = input.value;Теперь у нас есть "имя" (в переменной `name`), которое нам нужно положить в два места:
- в массив `names`;
- в HTML документ, чтобы его было видно в списке.
Первый пункт делается элементарно:
names.push(name);
Второй пункт чуть сложнее. Так как нас никак не ограничивают в средствах и требованиях, самый простой подход — каждый раз при получении нового имени добавлять новый элемент `li` внутрь элемента `ul`, который уже есть на странице. Нам вообще не нужен массив `names`, он здесь просто как требование задания.
Для того, чтобы добавить элемент внутрь другого элемента, в DOM API есть готовый метод `appendChild`. Однако, чтобы его вызвать, нам нужно сначала подготовить тот новый элемент, который мы хотим добавить. Итак, нам нужно создать новый элемент (подготовить в оперативной памяти его объект) `li`, с текстом, который мы получили из инпута. Без проблем:
const nameElement = document.createElement("li");
nameElement.textContent = name;Теперь мы можем найти на странице наш список и добавить в него этот наш новый элемент:
document.getElementById("names-list").appendChild(nameElement);
Всё, задача выполнена. Хорошим тоном будет ещё очищать поле ввода каждый раз, как мы добавляем имя в список, чтобы было проще вводить большие количества имён. Это делается элементарно:
input.value = "";
Вот результат после ввода нескольких случайных имён:
Всё, на этом задание решено. По крайней мере, в том виде, как было описано. Если нужно вводить не одно имя, а имя/фамилию/возраст, то принципиально ничего не меняется. Вместо того, чтобы брать текст из одного поля ввода, мы будем брать его из трёх одновременно. Дальше можно всё что угодно: писать одновременно в три списка или соединять три строчки в одну и писать в тот же список, или ещё что угодно. В базу данных сохранять.
Преимущество подхода именно с событием submit в том, что форма может быть отправлена очень большим количеством разных способов. Например, нажатием Enter в поле ввода текста. Также нажатие на кнопку обрабатывается автоматически, как побочный эффект. Если мы пользуемся браузером в командной строке или какими-то дополнительными аксессуарами для слепых, ввод текста также будет продолжать без проблем работать. Это называется "использование идиоматического подхода".
Ваш код практически рабочий и он сразу заработает, если вы поправите всего одну очень важную деталь. Дело в том, что внутри вашего метода getArr имеется изолированный контекст…
Догадались к чему я клоню? Если нет, то давайте... Читать далее
1 эксперт согласен
Чтобы каждый ввод имени добавлялся в массив и сохранялся, вам нужно объявить массив за пределами функции getArr(), чтобы он мог быть доступен в каждый раз, когда вы вызываете эту функцию. Затем вы можете использовать... Читать далее
Заработать пару сотен рублей онлайн на Яндекс✺Толока! Регистрируйся.
Перейти на toloka.yandex.ru/promo
Для решения этой задачи можно использовать простой массив и добавлять каждое введенное имя в этот массив при нажатии на кнопку. Затем при нажатии на другую кнопку можно вывести весь список имен, хранящихся в массиве.
Примерный... Читать далее