javascript - 从按钮更新输入事件监听器

Question

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

输入 1 的值更改输入 2 的值。我开发了控件来增加或减少 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">

Answer 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();
    });
}

这是完整的代码片段:

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">