如何让 onClick 应用于数字表单的标签？

Question

我有一个页面，其中包含大约 100 个数字表格。每个表单都有不同的标签，名称，id等。这是为了以后应用一些其他的javascript。

两个问题：是否可以设置 javascript 以便在单击标签时数字形式增加 1（即单击“苹果”）而不是数字框？由于每个表单都有不同的 id，是否可以通过 id 以外的其他东西来获取每个表单（另一种包罗万象的方式，因此它可以轻松应用于大约 100 种不同的表单）？

提前致谢！

<html lang="en">
<head>
<script>
    var i = 0;
    function onClick() {
        document.getElementById('applesQuantity').value = ++i;
    }
</script>
</head>
<body>
</body>

<label>Apples </label><input type="number" name="apples-quantity" id="applesQuantity" onclick="onClick()">
<label>Oranges </label><input type="number" name="oranges" id="orangesQuantity" onclick="onClick()">

</html>

Answer 1

我会使用事件委托 - 观察 <label> 上的点击，当看到时，导航到元素的 nextElementSibling 以获取输入并递增它：

document.body.addEventListener('click', (e) => {
  if (e.target.matches('label')) {
    const input = e.target.nextElementSibling;
    input.value = 1 + Number(input.value);
  }
});

<label>Apples </label><input type="number" name="apples-quantity" id="applesQuantity": >
<label>Oranges </label><input type="number" name="oranges" id="orangesQuantity": >

如何让 onClick 应用于数字表单的标签？

How can I make onClick apply to the label of a number form?

html

javascript

forms

label

onclick