在HTML中动态创建元素上运行函数
在HTML中动态创建元素上运行函数
提问于 2019-07-09 00: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-09 00: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-09 00:14:15
您想要做的是给您的输入一个唯一的id，这样您就可以将它在输入中传递给按钮，以增加和减少值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56943851
复制相关文章
相似问题
腾讯云开发者
