时间戳

首页 > 解决方案 > 如何在使用 appendChild 时在变量中读取和存储多个用户输入

javascript - 如何在使用 appendChild 时在变量中读取和存储多个用户输入

问题描述

我一直在尝试读取多个用户输入字段并将它们存储在一个变量中，以便我可以获取他们输入的内容并在单独的函数中使用它。不幸的是，我根本无法读取输入，每当我尝试使用 .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 -->

标签： javascriptjqueryhtml

解决方案

您可以将所有输入放在一个表单中，在该表单中放置一个 id 并使用表单元素的 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>

推荐阅读