如何用循环动态创建变量？

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 时显示 table，因为声明的变量为 3（在问题的开头），如果我想提交 1 或 2 个字段，则不会提交。如果有任何方法可以从循环创建变量并像我在这里所做的那样访问它 (einput1)

var tname = document.createTextNode(einput1);

Answer 1

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

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

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">

Answer 2

您需要为电子邮件命名才能提交

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

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>

如何用循环动态创建变量？

How to dynamically create variable with loop?

javascript

loops

dynamic

queryselector