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

Input Event Listener Update from Button

本文关键字：按钮 更新 侦听器 入事件 输入      更新时间：2023-09-26

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

输入

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

输入 1 和输入

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

手动输入 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">

这个

怎么样（我在点击后打电话给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">

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

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

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

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

相关文章：