javascript多字段创建限制问题

Question

我添加了创建多个年份的按钮，当年份为10时，我想停止创建字段。我怎样才能阻止这一切。第10年？

我还想禁用按钮一旦第10年的字段被创建。

let i = 2;
document.getElementById('add-new-person').onclick = function () {
let template = `
<h3>Year ${i}:</h3>
<p>
<input name="people[${i}][first_name]">
</p>
`;
let container = document.getElementById('people-container');
let div = document.createElement('div');
div.innerHTML = template;
container.appendChild(div);
i++;
}

body {
padding: 2em;
}
[type=submit] {
padding: 0.5em 2em;
}
.add-new-person {
background: #6688dd;
border-radius: 0.25em;
color: #fff;
display: inline-block;
padding: 0.5em;
text-decoration: none;
}

<form method="post">
<div id="people-container">
<h3>Year 1:</h3>
<p>
<input name="people[1][first_name]">
</p>
</div>
<a href="javascript:;" id="add-new-person" class="add-new-person">Add! new year</a>
<p>
<input type="submit" value="Save">
</p>
</form>

Answer 1

您可以使用按钮元素而不是a标记。这比标记效果更好。此外，为了防止按钮点击的默认行为，我们使用preventDefault((方法。所以我们的页面不会每次点击都重新加载。

要禁用您的按钮，只需在限制达到> 10年时将按钮attr设置为禁用true

我在每一行都添加了评论，以反映正在发生的事情。

运行下面的代码段以查看其工作情况。

//Button
let button = document.getElementById('add-new-person')
//Limit of elements
let i = 2;
//Click function
button.onclick = function(e) {
//Disable default behabviour
e.preventDefault()
//Appending extra years
let template = `
<h3>Year ${i}:</h3>
<p>
<input name="people[${i}][first_name]">
</p>`;

//Checking if the limit is > 10 then we are disabling the button
if (i > 10) {
//Disable button
button.disabled = true;
console.log('Button Disabled')
//Return false
return;
} else {
let container = document.getElementById('people-container');
let div = document.createElement('div');
div.innerHTML = template;
container.appendChild(div);
i++;
}
}

body {
padding: 2em;
}
[type=submit] {
padding: 0.5em 2em;
}
.add-new-person {
background: #6688dd;
border-radius: 0.25em;
color: #fff;
display: inline-block;
padding: 0.5em;
text-decoration: none;
}

<form method="post">
<div id="people-container">
<h3>Year 1:</h3>
<p>
<input name="people[1][first_name]">
</p>
</div>
<button id="add-new-person" class="add-new-person">Add! new year</button>
<p>
<input type="submit" value="Save">
</p>
</form>

Answer 2

我希望它有用

let i = 2;
document.getElementById('add-new-person').onclick = function () {
//check it if i<=10 do it
if(i <=10){
let template = `
<h3>Year ${i}:</h3>
<p>
<input name="people[${i}][first_name]">
</p>
`;
let container = document.getElementById('people-container');
let div = document.createElement('div');
div.innerHTML = template;
container.appendChild(div);
i++;
}
//if i>10 add deactive class to element
else{
document.getElementById("add-new-person").classList.add("Deactive");
}
}

body {
padding: 2em;
}
[type=submit] {
padding: 0.5em 2em;
}
.add-new-person {
background: #6688dd;
border-radius: 0.25em;
color: #fff;
display: inline-block;
padding: 0.5em;
text-decoration: none;
}
.add-new-person.Deactive{
background: gray;
cursor: not-allowed;
}

<form method="post">
<div id="people-container">
<h3>Year 1:</h3>
<p>
<input name="people[1][first_name]">
</p>
</div>
<a href="javascript:;" id="add-new-person" class="add-new-person">Add! new year</a>
<p>
<input type="submit" value="Save">
</p>
</form>