Input Event Listener Update from Button

Question

Im in the process of developing a game that makes use of heavy form inputs.

The Value of Input1 changes the value of Input2. I have developed controls to increase or decrease the value of Input1. The expected result is for it to change the value of input2 based off of the button clicks or manual user change.

Input1 and Input2 both make use of the input and change event listener.

When manually typing in input1 it changes the value of input2. However, when using the buttons to increase or decrease input1 value it does not increase input2.

What would be the proper event listener to use in this situation. If not, would I need to invoke the calculating function on button click.

Lots of code to cut through, but this should be all of the required stuff

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

For those with a similar problem.

I solved this by adding a focus event listener on the input. On the increase action I added focus and blur to the element on each click. This allows the focus event listener to fire and perform the action in question on click.

By using this method I am able to append the action dynamically to other inputs and not depend on an ugly if statement.

Something so simple in practice yet completely overlooked.

Answer 2

How about this (I'm calling the game.calc.track.act(); after a click:

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

Here is the full snippet:

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