Блог

Я динамически генерирую некоторые поля ввода на своей странице, и я хочу получить из них входные данные для сохранения в 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);

  }
}
 

Вы проходите через ввод…не массив или список узлов. Это не может работать

Я думаю, было бы проще, если бы вы добавляли идентификатор к каждому новому созданному вами полю ввода

 for(let i=0;i < inputValue;i  ){
   // create your element ipt
   ipt.setAttribute("id","autogenerated_"   i);
}
 

и получать значение на основе идентификатора

 document.getElementById("autogenerated_x").value();
 

что касается настройки прослушивателя событий, я не могу думать ни о каком другом классическом способе

 btn.addEventListener("click", function(e){
    // your functionality
});