我有一个按钮,按下它会创建新的输入栏,我希望这些输入栏具有唯一的 ID,例如 - textBar1、textBar2、textBar3 等等。
我尝试在函数外部创建一个值为 0 的变量,然后在函数内部为每次函数运行时添加带有 +1 的值,但这不起作用,而是将 id textBar0 分配给每个元素即已创建。
有人对如何解决这个问题有什么建议吗?
提前致谢!
HTML
<label for='ingredient'></label>
<input id="textBar" class="textBar" type="name" name="ingredient">
<div id="textBarPosition"></div>
<div id="addRemoveContainer">
<input id="addBar" type="button" value="Add Ingredient">
JavaScript/jQuery
var counter = 0;
function createSector() {
var input = document.createElement('input');
input.setAttribute("id", 'textBar' + counter +1);
input.type = 'text';
input.name = 'name[]';
return input;
counter = 1;
}
var form = document.getElementById('textBarPosition');
document.getElementById('addBar').addEventListener('click', function(e) {
// step 1: create element and set opacity to 0.
var selector = $(createSector());
selector.fadeIn();
// step 2: append it to its parent.
$(form).append(selector);
$('#removeBar').click(function(){
$("input:last-child").remove(".textBar");
});
});
最佳答案
那是因为您没有将更改后的值重新分配给 counter
。
使用 counter+=1
或仅使用 counter++
input.setAttribute("id", 'textBar' + counter++); // now it should work
你之前所做的总是将 1
添加到 0
关于javascript - 有没有办法为 createElement 对象分配唯一 ID?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26278942/