英文:
Adding elements dynamically in HTML for each section with JavaScript
问题
以下是您要的代码部分的中文翻译：
添加任务（输入+标签），当我输入名称并按下“添加”按钮时，为每个特定的部分/分区动态添加任务。
我尝试为每个按钮创建一个事件，然后为该特定部分的特定部分添加任务，但我无法实现它。是否有解决方案？
这是HTML：
<section id="1" class="1">
<div id="div1" class="add-input-label">
<input type="checkbox" name="checkbox-1" id="checkbox-1">
<label for="checkbox-1">测试</label>
</div>
<div id="btn-div-1" class="btn-div-1">
<input type="text" id="input-text-1">
<button id="btn-1" class="btn-add">添加</button>
</div>
</section>
<section id="2" class="2">
<div id="div2" class="add-input-label">
<input type="checkbox" name="checkbox-2" id="checkbox-2">
<label for="checkbox-2">测试</label>
</div>
<div id="btn-div-2" class="btn-div-2">
<input type="text" id="input-text-2">
<button id="btn-2" class="btn-add">添加</button>
</div>
</section>
这是JavaScript：
const btn = document.querySelectorAll('.btn-add');
const div = document.querySelectorAll('.add-input-label');
btn.forEach((btn) => {
btn.addEventListener('click', () => {
div.forEach((div) => {
let label = document.createElement('label');
let input = document.createElement('input');
div.appendChild(input);
div.appendChild(label);
label.innerText = '嘿';
input.type = 'checkbox';
});
});
});
请注意，当单击按钮时，它会在两个部分中添加。如果我点击第一部分的按钮，我希望只更改第一部分。
英文:
Adding a task (input + label) dynamically for each specific section/div when I enter the name and press the button "Add".
I've tried to make an event for each button and then add a task for the specific div of that specific section but I couldn't implement it. Is there any solution for this?
This is the HTML:
<section id="1" class="1">
<div id="div1" class="add-input-label">
<input type="checkbox" name="checkbox-1" id="checkbox-1">
<label for="checkbox-1">Test</label>
</div>
<div id="btn-div-1" class="btn-div-1">
<input type="text" id="input-text-1">
<button id="btn-1" class="btn-add">Add</button>
</div>
</section>
<section id="2" class="2">
<div id="div2" class="add-input-label">
<input type="checkbox" name="checkbox-2" id="checkbox-2">
<label for="checkbox-2">Test</label>
</div>
<div id="btn-div-2" class="btn-div-2">
<input type="text" id="input-text-2">
<button id="btn-2" class="btn-add">Add</button>
</div>
</section>
and this is the Javascript:
const btn = document.querySelectorAll('.btn-add');
const div = document.querySelectorAll('.add-input-label');
btn.forEach((btn) => {
btn.addEventListener('click', () => {
div.forEach((div) => {
let label = document.createElement('label');
let input = document.createElement('input');
div.appendChild(input);
div.appendChild(label);
label.innerText = 'hey';
input.type = 'checkbox';
});
});
});
Notice that when you click the button, it adds on both sections. If I clicked on the first section button, I wanted to change just the first section.
答案1
得分: 0
以下是翻译好的部分：
- 利用
forEach索引语法。在btn.forEach((btn,i)中的索引i可以用来区分按钮的索引。 - 你不需要在
div上再次使用forEach。在按钮点击监听器中，只需使用之前获取的按钮索引，并在div上执行相同的索引操作，以确保appendChild将附加到正确的div上。
英文:
There are few changes you need to made on your code to achieve what you wanted.
- Make use of
forEachindex syntax. With the indexiinbtn.forEach((btn,i), you can use it to differentiate on the button's index. - You dont need another
forEachon thediv. In button click listener, just use the button index you got earlier and perform the same indexing on thedivto make sure thatappendChildis appending on the correctdiv.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const btn = document.querySelectorAll('.btn-add');
const div = document.querySelectorAll('.add-input-label');
btn.forEach((btn,i) => {
btn.addEventListener('click', () => {
let label = document.createElement('label');
let input = document.createElement('input');
div[i].appendChild(input);
div[i].appendChild(label);
label.innerText = 'hey';
input.type = 'checkbox';
});
});
<!-- language: lang-html -->
<section id="1" class="1">
<div id="div1" class="add-input-label">
<input type="checkbox" name="checkbox-1" id="checkbox-1">
<label for="checkbox-1">Test</label>
</div>
<div id="btn-div-1" class="btn-div-1">
<input type="text" id="input-text-1">
<button id="btn-1" class="btn-add">Add</button>
</div>
</section>
<section id="2" class="2">
<div id="div2" class="add-input-label">
<input type="checkbox" name="checkbox-2" id="checkbox-2">
<label for="checkbox-2">Test</label>
</div>
<div id="btn-div-2" class="btn-div-2">
<input type="text" id="input-text-2">
<button id="btn-2" class="btn-add">Add</button>
</div>
</section>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论