从按钮输入事件侦听器更新答案

【问题标题】：Input Event Listener Update from Button从按钮输入事件侦听器更新
【发布时间】：2015-01-12 12:37:25
【问题描述】：

我正在开发一款使用大量表单输入的游戏。

Input1 的值改变了 Input2 的值。我开发了控件来增加或减少 Input1 的值。预期结果是它根据按钮单击或手动用户更改来更改 input2 的值。

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

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

在这种情况下使用什么事件监听器合适。如果没有，我需要在按钮点击时调用计算函数吗？

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

var game = {};

game.app = {
  init: function() {
    game.events.controls.init();
    game.events.track.init();
  },
}

game.calc = {
  controls: {
    increase: function(item) {
      item = document.getElementById(item);
      var size = item.getAttribute('data-size');
      var max = item.getAttribute('data-max');

      item.value = parseFloat(+item.value + 0.5).toFixed(size);

      if (+max < item.value) {
        item.value = (+max).toFixed(size);
      }
    }
  },

  track: {
    act: function() {
      document.getElementById('input2').value = (+document.getElementById('inputPlay').value + 100);
    }
  }
}

game.events = {
  controls: {
    init: function() {
      this.increaseAction();
    },
    increaseAction: function() {
      var increase = document.querySelectorAll('.increase');

      for (var i = 0; i < increase.length; i++) {
        increase[i].addEventListener('click', function(e) {
          game.calc.controls.increase(e.target.getAttribute('data-src'));
          return false;
        });
      }
    }
  },

  track: {
    init: function() {
      this.actAction();
    },

    actAction: function() {
      var inputPlay = document.getElementById('inputPlay');

      inputPlay.addEventListener('input', function() {
        game.calc.track.act();
      });

      inputPlay.addEventListener('change', function() {
        game.calc.track.act();
      });
    }
  }
}

game.app.init();

<a href="#" class="gameButton increase" data-src="inputPlay">Up</a>
<input type="text" id="inputPlay" name="inputPlay" value="100.00" class="inputMain" data-size="2" data-max="1000">
<input type="text" id="input2" name="input2" value="0.00" class="inputMain" data-size="2">

【问题讨论】：

标签： javascript

【解决方案1】：

这个怎么样（点击后我打电话给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();
    });
}

这是完整的sn-p：

var game = {};

game.app = {
    init: function () {
        game.events.controls.init();
        game.events.track.init();
    },
}

game.calc = {
    controls: {
        increase: function (item) {
            item = document.getElementById(item);
            var size = item.getAttribute('data-size');
            var max = item.getAttribute('data-max');

            item.value = parseFloat(+item.value + 0.5).toFixed(size);

            if (+max < item.value) {
                item.value = (+max).toFixed(size);
            }
        }
    },

    track: {
        act: function () {
            document.getElementById('input2').value = (+document.getElementById('inputPlay').value + 100);
        }
    }
}

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

    track: {
        init: function () {
            this.actAction();
        },

        actAction: function () {
            var inputPlay = document.getElementById('inputPlay');

            inputPlay.addEventListener('input', function () {
                game.calc.track.act();
            });

            inputPlay.addEventListener('change', function () {
                game.calc.track.act();
            });
        }
    }
}

game.app.init();

<a href="#" class="gameButton increase" data-src="inputPlay">Up</a>
<a href="#" class="gameButton decrease" data-src="inputPlay">Down</a>
<input type="text" id="inputPlay" name="inputPlay" value="100.00" class="inputMain" data-size="2" data-max="1000">
<input type="text" id="input2" name="input2" value="0.00" class="inputMain" data-size="2">

【讨论】：

对。这个解决方案的问题是，如果我需要扩展功能，我将无法做到。例如，如果我必须添加 inputPlay2 和 input3 来模拟效果，我将无法做到这一点。感谢您抽出宝贵时间提供帮助
有没有办法动态传递函数名
@Ray 抱歉，我没有意识到重用是你的目标，但是即使你想添加inputPlay2 和input3 很多其他的东西也行不通。您应该从一开始就以这种方式设计它。
是的，我有更多可玩的内容，然后显示的内容（不同字段和不同功能上的事件侦听器。库也扩展了。不得不采取一些捷径来删除示例中的大量代码。
我通过向输入添加焦点事件侦听器并在我的增加函数调用中将焦点和模糊应用于元素来解决了这个问题。

【解决方案2】：

对于有类似问题的人。

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

通过使用这种方法，我可以将动作动态附加到其他输入，而不是依赖于丑陋的 if 语句。

在实践中如此简单却被完全忽视的东西。

【讨论】：