通过JS在HTML中添加输入标签，并增加JS中的输入id

Question

我想写一个网站，在那里你可以在Textinput中写3封电子邮件。然而，我也添加了一个按钮，它为另一封电子邮件添加了另一个文本输入。我的问题是，我想为新添加的元素添加一个id，代码如下：email.setAttribute('id','increasing_number');。然而，它并不能按照我想要的方式工作。完整代码和结果：

function test() {
let ul =document.getElementById('ul');
var li = document.createElement('li');
var y = 4;
var email = document.createElement('input');
email.setAttribute('id',y); //<--
email.setAttribute('placeholder','E-Mail');
email.setAttribute('type','email');
email.setAttribute('name','email');
email.setAttribute('required','');
li.appendChild(email);
ul.appendChild(li);
y = y++;
}

<ul id="ul">
<li>...</li>
<li>...</li>
<li>...</li>
<li>
<input id="4" placeholder="E-Mail" type="email" name="email" required="">
</li>
<li>
<input id="4" placeholder="E-Mail" type="email" name="email" required="">
</li>
</ul>

您可以看到，它应该在第5个电子邮件input id="5"中显示，但它没有。它显示了数字4。它没有将旧的y值保存在JS文件中，也没有正确地增加它。

Answer 1

每次运行代码时，都会将y初始化为4。您可以有一个函数参数来保存元素的变量for id，然后您可以在for循环中调用它。

function test(id){
let ul = document.getElementById('ul');
let li = document.createElement('li');
let email = document.createElement('input');
email.setAttribute('id', id);
email.setAttribute('placeholder', 'E-mail');
email.setAttribute('type', 'email');
email.setAttribute('name', 'email');
email.setAttribute('required','');
li.appendChild(email);
ul.appendChild(li);
}
for(let i=1; i<=5; i++){
test(i);
}