如何使用循环动态创建变量？ [关闭]

Question

如何用循环重写这段代码？

var einput1 = document.querySelector("#email0").value;
var einput2 = document.querySelector("#email1").value;
var einput3 = document.querySelector("#email2").value;

以及如何从该循环中访问特定变量？谢谢。

编辑：- 这是演示-

//fuction to genrate email field
function emailGen() {
  var quant = document.getElementById("quantity").value;
  var container = document.getElementById("container");
  while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
  }
  for (a = 0; a < quant; a++) {
    var emailGen = document.createElement("input");
    emailGen.type = "email";
    emailGen.id = "email" + a;
    emailGen.placeholder = "Member's Email";
    container.appendChild(emailGen);
  }

}


var form = document.getElementById("nameForm");
// event
form.addEventListener("submit", tableGen);
//function for table generator
function tableGen(e) {
  e.preventDefault();
  var body = document.getElementsByTagName("body")[0];
  var table = document.createElement("table");
  var tblbody = document.createElement("tbody");

  var input1 = document.querySelector("#input1").value;
  var quan = document.querySelector("#quantity").value;
  //my question is here :-how to make this loop 
  var einput1 = document.querySelector("#email0").value;
  var einput2 = document.querySelector("#email1").value;
  var einput3 = document.querySelector("#email2").value;


  //table rows loop
  for (i = 0; i <= quan; i++) {
    var tblrow = document.createElement("tr");

    //table coloumn loop
    for (j = 0; j < 1; j++) {
      var tbldata = document.createElement("td");

      if (i == 0 && j == 0) {
        var pname = document.createTextNode(input1);
        tbldata.appendChild(pname);
      }
      if (i == 1 && j == 0) {
        var tname = document.createTextNode(einput1);
        tbldata.appendChild(tname);
      }
      if (i == 2 && j == 0) {
        var tname = document.createTextNode(einput2);
        tbldata.appendChild(tname);
      }
      if (i == 3 && j == 0) {
        var tname = document.createTextNode(einput3);
        tbldata.appendChild(tname);
      }
      tblrow.appendChild(tbldata);
    }

    tblbody.appendChild(tblrow);

  }
  table.appendChild(tblbody);
  body.appendChild(table);
  table.setAttribute("border", "4");
}

<form id="nameForm">
  <input type="text" id="input1" placeholder="Name"><br/>
  <input type="number" id="quantity" name="quantity" placeholder="Total Members(max 10)" min="1" max="10">
  <button type="button" id="okButton" onclick="emailGen()">  OK  </button>
  <div id="container"></div>
  <br/>
  <input type="submit" value="submit" onsubmit="tableGen()">
</form>

它只在输入为 3 时显示表格，因为声明的变量是 3（在问题的开头），如果我想提交 1 或 2 字段，它不会被提交。如果有任何方法可以从循环创建变量并像我在这里所做的那样访问它（einput1）

var tname = document.createTextNode(einput1);

Answer 1

您需要为电子邮件命名以提交它们

我还删除了提交按钮的 onsubmit 表单。它不属于那里，可以删除。你有一个提交事件处理程序，应该这样做

const container = document.getElementById("container");
document.getElementById("nameForm").addEventListener("submit", tableGen);
document.getElementById("okButton").addEventListener("click", emailGen);


//fuction to genrate email field
function emailGen() {
  const quant = document.getElementById("quantity").value;
  while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
  }
  for (let i = 0; i < quant; i++) {
    var emailGen = document.createElement("input");
    emailGen.type = "email";
    emailGen.id = "email" + i;
    emailGen.name = "email" + i;
    emailGen.placeholder = "Member's Email";
    container.appendChild(emailGen);
  }
}


//function for table generator
function tableGen(e) {
  e.preventDefault();
  const body = document.querySelector("body");
  const table = document.createElement("table");
  const tblbody = document.createElement("tbody");
  const input1 = document.getElementById("input1").value;
  const quan = document.getElementById("quantity").value;

  const emails = container.querySelectorAll("[type=email]")

  console.log(emails.length)

  //table rows loop
  for (let i = 0; i < quan; i++) {
    const tblrow = document.createElement("tr");
    for (let j = 0; j < emails.length; j++) {
      const tblcell = document.createElement("td");
      //table column loop
      const pname = document.createTextNode(input1);
      tblcell.appendChild(pname);
      const tname = document.createTextNode(emails[j].value);
      tblcell.appendChild(tname);
      tblrow.appendChild(tblcell);
    }


    tblbody.appendChild(tblrow);

  }
  console.log
  table.appendChild(tblbody);
  body.appendChild(table);
  table.setAttribute("border", "4");
}

<form id="nameForm">
  <input type="text" id="input1" placeholder="Name"><br/>
  <input type="number" id="quantity" name="quantity" placeholder="Total Members(max 10)" min="1" max="10">
  <button type="button" id="okButton">OK</button>
  <div id="container"></div>
  <br/>
  <input type="submit" value="submit">
</form>

上一个答案

document.getElementById("emailForm").addEventListener("submit", function(e) {
  e.preventDefault(); // stop submit
  const quan = +document.getElementById("quan").value
  const addr = Array.from({length: quan}, (_, i) => `<input id="email${i}" type="email" placeholder="email${i}" />`)
  this.innerHTML += addr.join('<br/>')
})

<form id="emailForm">
  <input type="number" min=1 max=10 id="quan" /><br/>
</form>

Answer 2

您可以使用循环和字符串插值来实现所需的结果。

inputs 数组存储 DOM 节点，然后您可以对其进行迭代以获得下面 console.log 中的值，或者如果您不想要 DOM 节点，您可以将值存储在 input 数组中没有了。

const quan = 3;
const inputs = Array.from({ length: quan }, (_, index) =>
  document.querySelector(`#email${index}`)
);

console.log(inputs.map((inp) => inp.value));

<input id="email0" type="email" value="value0">
<input id="email1" type="email" value="value1">
<input id="email2" type="email" value="value2">