Question

我正在开发一款利用重型输入的游戏。

Input1的值更改Input2的值。我已经开发了控制来增加或减少Input1的值。预期的结果是它可以根据按钮点击或手动用户更改来更改input2的值。

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

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

在这种情况下使用适当的事件监听器是什么。如果没有，我是否需要在按钮点击时调用计算功能。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

对于那些有类似问题的人。

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

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

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

从Button输入事件侦听器更新

2 个答案: