Получение данных из контейнера - PullRequest
Новая
       1

Получение данных из контейнера

0 голосов
/ 28 мая 2020

Я написал функцию, которая создает новые поля ввода в зависимости от количества необходимых полей ввода. Этот код ниже. 

for (i=0;i<number;i++){
    container.appendChild(document.createTextNode("Guest " + (i+1)));
    var input = document.createElement("input");
    input.id = "Guest" + i;
    container.appendChild(input);
    container.appendChild(document.createElement("br"));
    console.log(i.value);

Он создает новый идентификатор для каждого поля ввода. В приведенной ниже функции, в зависимости от номера, установленного для i, функция создает сгенерированное сообщение. 

function sendInput ()
{
    var guestNames = document.getElementById("Guest").value
    var personName = document.getElementById("people").value;
    var eventType = document.getElementById("event").value;
    var date = document.getElementById("date").value;
    var output = "Dear " + guestNames + " You have been invited to " + personName + "'s " + eventType + " on " + date +  " Thank you for coming!!";
    document.getElementById('output').innerHTML = output.repeat(i);
}

Проблема в том, что он не собирает данные для guestNames. Я новичок в JS, но искал и не могу найти решение своей проблемы. Любая обратная связь будет полезна.

Ответы [ 4 ]

1 голос
/ 28 мая 2020

ID сложно работать в динамической среде c, классы обычно являются самым простым решением. Этот код преобразует ваши входные данные в классы, затем l oop через них и собирает имена.

Итак, измените: 

input.id = "Guest" + i;

на 

input.setAttribute("class","guest");

И измените 

var guestNames = document.getElementById("Guest").value

на: 

var guests = document.querySelectorAll(".guest");
var guestNames = [];

guests.forEach(function(el){
  guestNames.push(el.value);
});

guestNames = guestNames.join(",");

Если вы хотите получать сообщение для КАЖДОГО гостя, вы должны использовать следующую функцию: 

function sendInput ()
{
    var personName = document.getElementById("people").value;
    var eventType = document.getElementById("event").value;
    var date = document.getElementById("date").value;

    var guests = document.querySelectorAll(".guest");
    var guestNames = [];

   document.getElementById('output').innerHTML = "";

    guests.forEach(function(el){
     document.getElementById('output').innerHTML += "Dear " + el.value + " You have been invited to " + personName + "'s " + eventType + " on " + date +  " Thank you for coming!!";
    });
}
0 голосов
/ 29 мая 2020

Ваш код неполный (насколько я могу судить).

  1. Вы нигде не указываете следующие элементы: 'container', 'guest', 'people', ' event ',' data 'или' output 'Я предполагаю, что они должны быть определены где-то в разделе HTML (не предоставляется)

  2. Чтобы иметь возможность создавать отображение переменных, вам необходимо для определения «контейнера» вы должны sh инициализировать его, прежде чем он будет использован в следующем for () l oop.
    Пример: var container = document.getElementById ('container');

  3. В l oop console.log (i.value) недействителен, поскольку i не является элементом, которому назначено значение для отображения. Это счетчик for () l oop.

  4. Я предполагаю, что функция sendInput () состоит в сборе информации от пользователя для каждого "Guest #" созданный первым l oop вашего кода. Однако вы пытаетесь собрать с "Гостя", который не был определен. Для числа 5 коллекции должны быть для «Гость1», «Гость2», «Гость3», «Гость4», «Гость5». Только "Гость" нигде не может быть найден в вашем l oop творении. То же самое касается "людей", "событие" и "дата", на которые ссылаются для сбора значений, но нет элементов с таким названием.

  5. Не совсем уверен, почему вы смешиваете создание DOM техники (???). Вы создаете номер элемента для гостя, а затем выводите результаты с помощью .inner HTML. Вам следует использовать метод создания DOM, но я использовал ваш код, поскольку вы указали, что вы новичок.

Вот несколько (частично) исправленный код, с которым вы можете продолжить. 

<code><!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">

<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>

<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>

</style>

</head><body>
<input type="text" value="5/28/2020" id="date">
<pre id='container'>
Отчет console.clear (); function init () { var number = 5; var container = document.getElementById ('контейнер'); для (i = 0; i
0 голосов
/ 28 мая 2020

Насколько я понимаю, когда вы пытаетесь получить имя гостя 

var guestNames = document.getElementById("Guest").value

, вы не получите никакого элемента по двум причинам, потому что нет элемента с идентификатором «Гость». Фактически вы генерируете их в форме "GuestN"

`input.id = "Guest" + i;`

Вероятно, вы захотите добавить параметр i в функцию sendInput (), чтобы внутренне вы могли объединить его с Guest, как вы это делали. выше и получите правильный элемент с помощью getElementById().

0 голосов
/ 28 мая 2020

Вы пытаетесь получить узел по идентификатору var guestNames = document.getElementById("Guest").value Но все узлы имеют разные идентификаторы, например Guest0, Guest1 et c. Я пытаюсь написать свой код, но ваш фрагмент не заполнен. Надеюсь, я вам помог.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...