javascript - Javascript 中数字计数器的动态输入

Question

我正在尝试创建两个数字计数器，它们可以实时递增和递减另一个计数器。而且我不太了解 Javascript。

 <input type="number" step="1" value="10" name="counter1" id="counter1">

 <input type="number" step="1" value="10" name="counter2" id="counter2">

如果counter1增加，counter2应该减少，反之亦然；它们基本上是彼此相反的。我尝试过实现一些 Javascript，但进展并不顺利，而且我不确定如何同时实现递增和递减。

 <script type="text/javascript"> //some non-working example code
  function count() {
    var counter1 = document.getElementById('counter1').value;
    var counter2 = document.getElementById('counter2').value;
    document.getElementById('counter2').onclick = function() { //onclick doesn't take into account if the input was increased or decreased.
      counter2++;
      counter1--;
    }​
    document.getElementById('counter1').onclick = function() {
      counter1++;
      counter2--;
    }​
  }
 count();
 </script>

Answer 1

两个主要问题:

1. 将输入值分配给变量不会创建引用，而是创建副本。这意味着它不会修改存储在输入中的数字，只会修改您创建的复制变量。

2. 您不应使用click 事件。您应该使用 change event因为只要值发生变化它就会触发。

最后，您可以跟踪每个输入的先前值并将其与新值进行比较，以确定它是增加还是减少。更简单的是，您可以计算这些值之间的差异，并从其他输入值中减去该差异。

var counter1 = document.getElementById('counter1');
var counter2 = document.getElementById('counter2');
var prevCounter1 = counter1.value;
var prevCounter2 = counter2.value;

counter1.addEventListener('change', function() {
  var value1 = parseInt(counter1.value);
  var value2 = parseInt(counter2.value);
  var delta = value1 - prevCounter1;
  counter2.value = value2 - delta;
  prevCounter1 = value1;
});

counter2.addEventListener('change', function() {
  var value1 = parseInt(counter1.value);
  var value2 = parseInt(counter2.value);
  var delta = value2 - prevCounter2;
  counter1.value = value1 - delta;
  prevCounter2 = value2;
});

<input type="number" step="1" value="10" name="counter1" id="counter1">
<input type="number" step="1" value="10" name="counter2" id="counter2">