Javascript 输入事件侦听器更新自按钮

我正在开发一个游戏，利用重形式输入

Input1的值更改Input2的值。我已经制定了增加或减少输入值的控制措施1。预期的结果是它根据按钮点击或手动用户更改来更改input2的值

Input1和Input2都使用输入和更改事件侦听器

手动键入input1时，会更改input2的值。但是，当使用按钮增加或减少input1值时，它不会增加input2

在这种情况下，应该使用什么样的事件侦听器。如果没有，我需要在单击按钮时调用计算函数

有很多代码需要删节，但这应该是所有必需的东西

var-game={}；
game.app={
init:function（）{
game.events.controls.init（）；
game.events.track.init（）；
},
}
game.calc={
控制：{
增加：职能（项目）{
item=document.getElementById（item）；
var size=item.getAttribute（'data-size'）；
var max=item.getAttribute（'data-max'）；
item.value=parseFloat（+item.value+0.5）.toFixed（大小）；
如果（+最大值<项目值）{
item.value=（+max）.toFixed（尺寸）；
}
}
},
轨道：{
行动：职能（）{
document.getElementById（'input2'）。值=（+document.getElementById（'inputPlay'）。值+100）；
}
}
}
game.events={
控制：{
init:function（）{
这个.increaseAction（）；
},
increaseAction:函数（）{
var increase=document.querySelectorAll（'.increase'）；
对于（变量i=0；i

这个怎么样（我在点击后调用
game.calc.track.act（）；
：

// changed this function a bit
increaseAction: function () {
    var increase = document.querySelectorAll('.increase');
    increase[0].addEventListener("click", function (e) {
        e.preventDefault();
        game.calc.controls.increase(e.target.getAttribute('data-src'));
        // this here
        game.calc.track.act();
    });
}

以下是完整的片段：


var-game={}；
game.app={
init：函数（）{
game.events.controls.init（）；
game.events.track.init（）；
},
}
game.calc={
控制：{
增加：职能（项目）{
item=document.getElementById（item）；
var size=item.getAttribute（'data-size'）；
var max=item.getAttribute（'data-max'）；
item.value=parseFloat（+item.value+0.5）.toFixed（大小）；
如果（+最大值<项目值）{
item.value=（+max）.toFixed（尺寸）；
}
}
},
轨道：{
行动：职能（）{
document.getElementById（'input2'）。值=（+document.getElementById（'inputPlay'）。值+100）；
}
}
}
game.events={
控制：{
init：函数（）{
这个.increaseAction（）；
},
increaseAction:函数（）{
var increase=document.querySelectorAll（'.increase'）；
增加[0]。添加EventListener（“单击”），函数（e）{
e、 预防默认值（）；
game.calc.controls.increase（e.target.getAttribute（'data-src'）；
game.calc.track.act（）；
});
}
},
轨道：{
init：函数（）{
这个动作（）；
},
actAction:函数（）{
var inputPlay=document.getElementById（'inputPlay'）；
inputPlay.addEventListener（'input'，函数（）{
game.calc.track.act（）；
});
inputPlay.addEventListener（'change'，函数（）{
game.calc.track.act（）；
});
}
}
}
game.app.init（）；
适用于有类似问题的人

我通过在输入上添加焦点事件监听器解决了这个问题。在“增加”操作中，我在每次单击时向元素添加焦点和模糊。这允许焦点事件监听器在单击时触发并执行相关操作

通过使用此方法，我能够将操作动态附加到其他输入，而不依赖于丑陋的if语句

一些在实践中非常简单但却被完全忽略的东西。
是的。这个解决方案的问题是，如果我需要扩展功能，我将无法扩展。例如，如果我必须添加inputPlay2和input3来模拟效果，我将无法做到这一点。感谢您花时间提供帮助。有没有方法可以传递该功能姓名dynamically@Ray很抱歉，我没有意识到重用是你的目标，但是即使你想添加
inputPlay2
和
inputplay3
很多其他东西也不起作用。你应该从一开始就用这种方式设计它。是的，我有更多的工作要做，而不是展示什么（不同字段和不同函数上的事件侦听器。库也进行了扩展。在示例中，必须采取一些快捷方式来删除大量代码。我通过向输入中添加一个焦点事件侦听器来解决此问题，并在我的increase函数中调用对元素应用焦点和模糊。