时间戳

首页 > 解决方案 > 如何循环动态生成的输入字段？

javascript - 如何循环动态生成的输入字段？

问题描述

我在我的页面上动态生成一些输入字段，如果这种方式有效，我想从它们中获取输入以存储在 localStorage 中？建议一种解决方法，如何做到这一点？另外我如何添加事件侦听器来提交按钮？以下是代码，看看它并给出一些建议/即兴创作。

..

HTML
<div id="warnMessage"></div>
<div class="add"></div>
<div class="inputs">
        <input
          type="text"
          maxlength="1"
          id="inputValue"
        />
        <button class="btn" type="button">+</button>
      </div>

javascript

const div = document.querySelector(".add");


const add = document
  .querySelector(".btn")
  .addEventListener("click", addingInps);

function addingInps() {
  const inputValue = parseInt(document.getElementById("inputValue").value);

  if (isNaN(inputValue)) {
    document.getElementById("warnMessage").innerText = "Enter Again";
    document.getElementById("inputValue").value = "";
  } else {
    const form = document.createElement("form");
    form.method = "post";
    form.action = "#";

    for (let i = 0; i < inputValue; i++) {

      const inp = document.createElement("input");
      inp.type = "text";
      inp.maxLength = "12";
      inp.required = true;
      inp.className = "inp";

      const br = document.createElement("br");

      
      form.appendChild(br.cloneNode());
      form.appendChild(inp);
      form.appendChild(br.cloneNode());

      div.appendChild(form);
      document.querySelector("#inputValue").style.display = "none";
    }

    const sub = document.createElement("button");
    sub.className = "subButton";
    sub.type = "button";
    sub.value = "button";
    sub.textContent = "Submit"
    form.appendChild(sub);

  }
}

标签： javascriptfor-looplocal-storageaddeventlistener

解决方案

您正在循环输入...而不是数组或节点列表。它不能工作

推荐阅读