如何解决我想在 JavaScript 的克隆方法中更改标签值
我正在使用 JavaScript 通过单击按钮来克隆一行表单。并且每添加一行,新行的标签值就会改变。我的意思是主标签是“依赖 2”,在新行中它更改为“依赖 3”。我不知道如何更改标签。在这里你可以看到我的代码。克隆正在运行,但没有更改标签:
function myFunction() {
var elem = document.querySelector('#dependent');
var clone = elem.cloneNode(true);
clone.id = "dependent2";
elem.after(clone);
var param = document.getElementsByTagName("lable");
var id = new Array();
for (i = 2; i < 7; i++) {
id[i] = param.item(i);
lable[i].innerHTML = "dependent" + i + 1;
}
}
<form class="needs-validation" invalidate>
<div class="form-row">
<label class="col-4 offset-2 col-form-label">Dependent 1</label>
<div class="form-group col-4">
<div class="input-group mx-auto" style="border-radius: 3px;width:100%;">
<input type="number" class="form-control " id="validationDefault01" style="font-size:15px" placeholder="Age" required>
</div>
</div>
</div>
<div class="form-row" id="dependent">
<label class="col-4 offset-2 col-form-label">Dependent 2</label>
<div class="form-group col-4">
<div class="input-group mx-auto" style="border-radius: 3px;width:100%;">
<input type="number" class="form-control " id="validationDefault01" style="font-size:15px" placeholder="Age" required>
</div>
</div>
</div>
<button class="quebtn1 mx-auto" type="button" style="width: 150px;border-radius:8px;" onClick="myFunction()">Add Dependents</button>
解决方法
除了打字错误(标签/标签)之外,您似乎过度复杂化了标签文本的更新(为什么是循环?)。这可以简单地完成:
let nextLabel = 3;
function myFunction() {
var elem = document.querySelector('#dependent');
var clone = elem.cloneNode(true);
clone.id = "dependent"+nextLabel;
elem.parentElement.insertBefore(clone,elem.parentElement.children[elem.parentElement.length-1]);
var label = clone.querySelector("label")
label.innerHTML = "Dependent " + (nextLabel++);
}
<form class="needs-validation" invalidate>
<div class="form-row">
<label class="col-4 offset-2 col-form-label">Dependent 1</label>
<div class="form-group col-4">
<div class="input-group mx-auto" style="border-radius: 3px;width:100%;">
<input type="number" class="form-control " id="validationDefault01" style="font-size:15px" placeholder="Age" required>
</div>
</div>
</div>
<div class="form-row" id="dependent">
<label class="col-4 offset-2 col-form-label">Dependent 2</label>
<div class="form-group col-4">
<div class="input-group mx-auto" style="border-radius: 3px;width:100%;">
<input type="number" class="form-control " id="validationDefault01" style="font-size:15px" placeholder="Age" required>
</div>
</div>
</div>
<button class="quebtn1 mx-auto" type="button" style="width: 150px;border-radius:8px;" onClick="myFunction()">Add Dependents</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。