在HTML中动态创建元素上运行函数
在HTML中动态创建元素上运行函数
提问于 2019-07-08 16:04:41
我有一个输入框包围着加和减按钮。您可以手动在输入框中输入数字，也可以按“加或减”按钮来增加或减少数字。
<button type="button" class="btn btn-info changeValue" onclick="decreaseValue()">-</button>
<input type="number" class="form-control" name="quantity" id="addSub" value="0" placeholder="Quantity" required>
<button type="button" class="btn btn-info changeValue" onclick="increaseValue()">+</button>Javascript
function increaseValue() {
var value = parseInt(document.getElementById('addSub').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('addSub').value = value;
}
function decreaseValue() {
var value = parseInt(document.getElementById('addSub').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('addSub').value = value;
}现在我有了按钮来动态地生成这个输入框。可以生成多个输入框。但是，输入框中的“添加”和“子”按钮都将指向原始输入框。是否有一种方法可以使“添加”和“子”按钮始终指向它旁边的输入框？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-08 16:08:41
单击按钮时，检查其textContent以查看关联的输入是位于其左侧还是右侧，然后分别选择目标(单击的元素)的previousElementSibling或nextElementSibling：
document.addEventListener('click', ({ target }) => {
if (!target.matches('button')) {
return;
}
const doAdd = target.textContent === '+';
const input = doAdd ? target.previousElementSibling : target.nextElementSibling;
input.value = Number(input.value) + (doAdd ? 1 : -1);
});<button>-</button>
<input type="number" value="0">
<button>+</button>
<button>-</button>
<input type="number" value="0">
<button>+</button>
Stack Overflow用户
发布于 2019-07-08 16:14:15
您想要做的是给您的输入一个唯一的id，这样您就可以将它在输入中传递给按钮，以增加和减少值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56943851
复制
相似问题
在动态html上运行函数
动态创建的html元素的运行时绑定函数
在angularjs中创建动态html元素
在JS中创建动态HTML元素
无法在动态创建的元素上绑定函数
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
