javascript 创建一个for循环来接受编号的用户输入

siotufzp  于 2023-04-19  发布在  Java
关注(0)|答案(1)|浏览(109)

所以我有一个javascript程序,它将在点击时创建额外的文本框供用户输入数据。
它的作用是

<input type="text" id="uTitle1" />

用户单击添加另一个框,并创建此

<input type="text" id="uTitle2" />

等等等等
我现在需要实际获取这些输入,并将它们放入某种列表中,这样我就可以运行for循环,使用document.write()将它们打印到新页面上
我似乎想不出做这件事的正确方法
我试过了
t1是迭代器

function loopThroughInputs(input){
    var storedList = [];

    for (i = 0; i < t1; i++){
      var currentVar = document.getElementById(input + (i + 1));
      storedList.push(currentVar)
    };
}
uxhixvfz

uxhixvfz1#

我在这里演示了两种不同的方法。
第一种方法在所有输入上使用一个简单的类,并简单地遍历它们。
第二种方法是为按钮和每个输入字段添加一个数据属性,这个方法允许你使用一个数据属性来存储你想要获取的字段,假设有一组字段。
我创建的函数只是传递一个选择器来循环。

function loopThroughInputs(selector){
    let inputs = document.querySelectorAll(selector);
    let storedList = [];
    
    inputs.forEach((i)=>{
      storedList.push(i.value)
    });
    
    return storedList;
}

document.querySelector(".btn-getByGeneric").addEventListener("click",() => {
  console.log(loopThroughInputs(".input"))
});

document.querySelector(".btn-getByField").addEventListener("click",(e) => {
  console.log(loopThroughInputs("input[data-field='" + e.target.dataset.field + "']"))
});
<input data-field="uTitle" type="text" class="input" />
<input data-field="uTitle" type="text" class="input" />
<input data-field="uTitle" type="text" class="input" />
<hr>
<button class="btn-getByGeneric">get by generic class</button>
<button class="btn-getByField" data-field="uTitle">get by field</button>

相关问题