Как читать и хранить несколько пользовательских вводов в переменной при использовании appendChild

Question

Я пытался прочитать несколько полей ввода пользователя и сохранить их в переменной, чтобы я мог взять то, что они вводили, и работать с ним в отдельной функции. К сожалению, я не могу получить ввод для чтения вообще, каждый раз, когда я пытаюсь сослаться на него, используя .getElementByID, я всегда получаю, что это NULL.

Проблема, которую я пытаюсь решить, состоит в том, что пользователю будет предложено указать несколько имен людей, с которыми он хочет разделить счет. Если они введут 5, то появятся 5 текстовых подсказок с просьбой дать мне имя каждого человека. Я хочу иметь возможность прочитать 5 имен и сохранить их в массиве или переменной, чтобы я мог использовать эти имена позже в других функциях. Я не знаю, как читать и хранить имена, и, посмотрев в Интернете множество различных решений, я не смог их решить.

Любая помощь будет принята с благодарностью. Прикрепление двух основных компонентов кода ниже.

function addFields() {
  // Number of inputs to create
  var number = document.getElementById("member").value;
  // Container <div> where dynamic content will be placed
  var container = document.getElementById("container");
  // Clear previous contents of the container
  while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
  }
  for (i = 0; i < number; i++) {
    // Append a node with a random text
    container.appendChild(document.createTextNode("Member " + (i + 1)));
    // Create an <input> element, set its type and name attributes
    var input = document.createElement("input");
    input.type = "text";
    input.name = "member" + i;
    container.appendChild(input);
    // Append a line break 
    container.appendChild(document.createElement("br"));
  }
  var results = document.getElementById("input").value;
  alert(results);
}

<!-- Start of Start Step 1 Splitting Start page -->
<div data-role="page" id="splitting_start">

  <div data-role="header">
    <h1>Step 1: Enter Names of Patrons</h1>
  </div>
  <!-- /header -->

  <div data-role="content">

    <h3><u>Please enter names of patrons below:</h3></u>
      <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
      <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
      <div id="container" />

  </div>
  <!-- /content -->

  <div data-role="navbar">
    <ul>
      <li> <a href="#homepage" data-icon="arrow-l" data-transition="slide" data-direction="reverse">Go back to Homepage</a>
        <!--<li> <a href="#map" data-icon="info">What is this step?</a>-->
        <li> <a href="#splitting_items" data-icon="arrow-r" data-transition="slide">Go to Step 2: Enter Items </a>
    </ul>
  </div>

  <div data-role="footer">
    <h5><i>Seven-Ten: The Easy Way To Split </h5></i>
  </div>
  <!-- /footer -->

</div>
<!-- /page -->

Answer 1

Вы можете поместить все входные данные в форму, поместить идентификатор в эту форму и прочитать данные формы со свойством elements элемента формы

Вот вам пример:

document.querySelector("#test").appendChild(document.createElement("input"));
document.querySelector("#test").appendChild(document.createElement("input"));
document.querySelector("#test").appendChild(document.createElement("input"));
function showFormValues() {
  let inputs = document.querySelector("#test").elements;
  var values = ""
  for (i = 0; i < inputs.length; i++) {
    // Disable all form controls
    values += inputs[i].value;
  }
document.querySelector("#resultTest").value = values
}

<form id="test">
</form>
<input readonly placeholder="result" id="resultTest"/>
<button onclick="showFormValues()" > test</button>