在循环内调用函数答案

【问题标题】：Calling a Function Inside a Loop在循环内调用函数
【发布时间】：2017-01-07 08:02:28
【问题描述】：

我想问一下是否可以使用 Javascript 在循环内调用函数。

我想创建一个文本字段，在不使用 HTML“数字”输入的情况下增加和减少按钮。

有没有更简单的方法将函数标准化为 1 并改用循环？

function increment() {
    document.getElementById("myNumber").stepUp(1);
}
function increment2() {
    document.getElementById("myNumber2").stepUp(1);
}

Number: <input type="number" id="myNumber">
<button onclick="increment()">+</button>

Number: <input type="number" id="myNumber2">
<button onclick="increment2()">+</button>

【问题讨论】：

标签： javascript function loops

【解决方案1】：

如何将 id 作为参数传递给函数：

function increment(id) {
    document.getElementById(id).stepUp(1);
}

然后：

Number: <input type="number" id="myNumber">
<button onclick="increment('myNumber')">+</button>

Number: <input type="number" id="myNumber2">
<button onclick="increment('myNumber2')">+</button>

【讨论】：

【解决方案2】：

可以在函数调用中传递输入的id：

function increment(elem) {
  document.getElementById(elem).stepUp(1);
}

Number:
<input type="number" id="myNumber">
<button onclick="increment('myNumber')">+</button>


Number:
<input type="number" id="myNumber2">
<button onclick="increment('myNumber2')">+</button>

【讨论】：

【解决方案3】：

其他答案肯定解决了这个任务，但是......现在强烈不建议使用 'onclick' 和类似属性来通过 JavaScript 处理事件（例如，请参阅“Why is using onClick() in HTML a bad practice?”）。

推荐的方式是addEventListener('click', callback)，因为这种方式代码更易维护、更清晰。

请参阅https://jsfiddle.net/zrx2xqgg/ 作为您特定任务的示例。输入的选择器作为属性传递给按钮。

【讨论】：