輸入事件監聽器從按鈕更新

Question

我正在開發一個使用重型輸入的遊戲過程。

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

Answer 1

對於那些有類似的問題。

我通過在輸入中添加焦點事件偵聽器來解決這個問題。在增加動作時，我將焦點和模糊添加到了每次點擊中的元素上。這允許焦點事件偵聽器觸發並在點擊時執行有問題的操作。

通過使用此方法，我可以將動作追加到其他輸入，而不依賴於醜陋的if語句。

一些在實踐中如此簡單卻完全被忽視的東西。

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