Javascript for循环生成加减按钮仅首个输入框生效问题求助

问题根源 #

• 所有输入框用了同一个id="number"：HTML要求ID全局唯一，document.getElementById('number')永远只会返回第一个匹配的输入框，所以所有按钮点击都只会改第一个框的值。
• 点击事件没有绑定对应输入框：现有的add()/subtract()函数不知道触发按钮对应的是哪个输入框。
• 函数名不匹配：按钮上写的调用subtract()，但实际定义的减函数名叫subtrahieren()，调用时会报错。

修复方案 #

修改逻辑很简单：给每个输入框加带索引的唯一ID，绑定点击事件时把当前索引传给加减函数，函数通过索引找到对应的输入框修改值即可，修改后代码如下：

for(var i = 0; i < arrayinput.length; i++){
    // 数字输入框
    var myParent3 = NumberContainer;
    var numberfield = document.createElement("input");
    numberfield.setAttribute('class','numberfield');
    // 给每个输入框加带索引的唯一ID
    numberfield.setAttribute('id','number_' + i);
    numberfield.setAttribute('value','0');      
    myParent3.appendChild(numberfield);
    
    // 加减按钮
    var myParent4 = SubtractContainer;
    var subtractButton = document.createElement("button");
    subtractButton.setAttribute('class','subtractButton');
    subtractButton.textContent = "-";
    // 点击时传入当前索引，同时修正函数名匹配
    subtractButton.setAttribute('onclick','subtract(' + i + ')');
    myParent4.appendChild(subtractButton);

    var myParent5 = AddContainer;
    var addButton = document.createElement("button");
    addButton.setAttribute('class','addButton');
    addButton.textContent = "+";
    // 点击时传入当前索引
    addButton.setAttribute('onclick','add(' + i + ')');
    myParent5.appendChild(addButton);   
};

function add(index){
    // 通过索引找到对应输入框
    var input = document.getElementById('number_' + index);
    var value = parseInt(input.value);
    value++;
    input.value = value;
};
function subtract(index){
    // 修正函数名，通过索引找对应输入框
    var input = document.getElementById('number_' + index);
    var value = parseInt(input.value);
    // 如果需要避免减到负数，可以加判断：if(value > 0) value--;
    value--;
    input.value = value;
};

如果不想用ID绑定，也可以直接把输入框元素的引用存到按钮的自定义属性上，或者用事件委托的方式绑定事件，核心逻辑都是让加减函数能匹配到对应的输入框即可。

内容的提问来源于stack exchange，提问作者Jan P