Javascript 从容器中获取数据_Javascript_Html

Javascript 从容器中获取数据

javascript html

Javascript 从容器中获取数据,javascript,html,Javascript,Html,我编写了一个函数，根据所需输入字段的数量创建新的输入字段。代码如下 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); cont

我编写了一个函数，根据所需输入字段的数量创建新的输入字段。代码如下

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);

问题是它没有为客人收集数据。我对JS很陌生，但已经搜索过了，找不到解决问题的方法。任何反馈都会有帮助。

您尝试通过id var guestNames=document.getElementByIdGuest.value获取节点

但是所有节点都有不同的id，比如Guest0、Guest1等等。我正在尝试编写自己的代码，但是您的代码片段还没有满。希望我能帮助您。

ID在动态环境中很难使用，类通常是最简单的解决方案。这段代码将把您的输入转换成类，然后遍历它们并收集名称

因此，改变：

input.id = "Guest" + i;

到

改变

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

致：

如果您想为每位客人留言，则可以使用以下功能：

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!!";
    });
}

据我所知，当你试图取客人的名字时

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

由于两个原因，您不会得到任何元素，因为没有id为Guest的元素。事实上，您以GuestN的形式生成它们

您可能希望向sendInput函数添加一个参数i，以便在内部可以像上面那样将其连接到Guest，并使用getElementById获得正确的元素。

据我所知，您的代码不完整

您不会在任何位置指定以下元素： “容器”、“来宾”、“人员”、“事件”、“数据”或“输出” 我假设它们应该在HTML部分的某个地方定义，而不是提供

为了能够创建变量显示，您需要先定义要初始化的“容器”，然后再在后面的for循环中使用它。示例：var container=document.getElementById'container'

在循环中，console.logi.value无效，因为i不是已分配值以显示的元素。它是for循环的计数器

我假设sendInput的功能是从用户那里收集代码第一个循环创建的每个来宾的信息。但是，您尝试从尚未定义的来宾处收集。对于数量为5的客户，集合应为Guest1、Guest2、Guest3、Guest4、Guest5。在循环创建中的任何位置都找不到仅来宾。值集合引用的“人员”、“事件”和“日期”也是如此，但没有这样命名的元素

不太清楚为什么要混合DOM创建技术？？？。您为来宾创建元素的数量，但随后使用.innerHTML输出结果。您应该使用DOM创建方法，但我使用了您的代码，因为您指出您是初学者

下面是一些部分更正的代码，您可以继续使用

<!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'></pre>
<button id="report">Report</button>
<pre id='output'></pre>

<script>
console.clear();

function init() {
  var number = 5;
  var container = document.getElementById('container');

  for (i=0;i<number;i++) {
    var value = "Guest " + (i+1)+' ';
    container.appendChild(document.createTextNode(value));

    var input = document.createElement("input");
    input.id = "Guest" + i;
    input.value = value;

    container.appendChild(input);
    container.appendChild(document.createElement("br"));
    console.log(i); // .value);
  }
  document.getElementById('report').addEventListener('click',sendInput);
} init();

  function sendInput () {
    var date = document.getElementById("date").value,
        output = document.getElementById('output'),
        info = '';
        var guestNames = [...document.querySelectorAll('#container input')];  // alert(guestNames.length);

    for (let i=0; i<guestNames.length; i++) {
      info = `Dear ${guestNames[i].value}:\nYou have been invited to XXX's EVENT on ${date}\nThank you for coming!!\n\n`;
      output.innerHTML += info;
    }
//    var guestNames = document.getElementById("Guest").value
//    var personName = document.getElementById("people").value;
//    var eventType = document.getElementById("event").value;
//    var output = "Dear " + guestNames + " You have been invited to " + personName + "'s " + eventType + " on " + date +  " Thank you for coming!!";
//    output = `Dear ${guestNames}:\nYou have been invided to XXX's EVENT on ${date}\nThank you for coming!!`;
//    document.getElementById('output').innerHTML = output.repeat(i);
  }

</script>

</body></html>

这就是我想说的：gj。据我所知，OP想用他们的名字欢迎每一位客人，所以imho ID是有意义的。但我承认他们不清楚最终目的，所以让我们等待反馈；是的，这很有帮助，但正如罗伯特所说，我想让它在每次打印欢迎行的地方。这是每个人的名字。@zlucas03在你发表评论之前我更新了我的答案，我在thereFWIW中有一个新的sendInput函数，分号实际上是可选的行终止符。它们只在打包/最小化javascript时才真正需要。@imvain2抱歉，由于我的C-ish背景，我经常落入这个陷阱。我纠正了它。谢谢你的报告。

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!!";
    });
}

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

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

<!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'></pre>
<button id="report">Report</button>
<pre id='output'></pre>

<script>
console.clear();

function init() {
  var number = 5;
  var container = document.getElementById('container');

  for (i=0;i<number;i++) {
    var value = "Guest " + (i+1)+' ';
    container.appendChild(document.createTextNode(value));

    var input = document.createElement("input");
    input.id = "Guest" + i;
    input.value = value;

    container.appendChild(input);
    container.appendChild(document.createElement("br"));
    console.log(i); // .value);
  }
  document.getElementById('report').addEventListener('click',sendInput);
} init();

  function sendInput () {
    var date = document.getElementById("date").value,
        output = document.getElementById('output'),
        info = '';
        var guestNames = [...document.querySelectorAll('#container input')];  // alert(guestNames.length);

    for (let i=0; i<guestNames.length; i++) {
      info = `Dear ${guestNames[i].value}:\nYou have been invited to XXX's EVENT on ${date}\nThank you for coming!!\n\n`;
      output.innerHTML += info;
    }
//    var guestNames = document.getElementById("Guest").value
//    var personName = document.getElementById("people").value;
//    var eventType = document.getElementById("event").value;
//    var output = "Dear " + guestNames + " You have been invited to " + personName + "'s " + eventType + " on " + date +  " Thank you for coming!!";
//    output = `Dear ${guestNames}:\nYou have been invided to XXX's EVENT on ${date}\nThank you for coming!!`;
//    document.getElementById('output').innerHTML = output.repeat(i);
  }

</script>

</body></html>