title: Dynamic input for number counters in Javascript
body: <p>I'm trying to create two number counters that can increment and decrement the other counter in real-time. Also I don't know Javascript too well.</p>
  
  <pre><code> &lt;input type="number" step="1" value="10" name="counter1" id="counter1"&gt;
  
   &lt;input type="number" step="1" value="10" name="counter2" id="counter2"&gt;
  </code></pre>
  
  <p>If <code>counter1</code> is increased, <code>counter2</code> should be decreased, and vice versa; they are basically the inverse of each other. I've tried to implement some Javascript but it's not going well and I'm unsure of how to implement both incrementing and decrementing at the same time.</p>
  
  <pre><code> &lt;script type="text/javascript"&gt; //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();
   &lt;/script&gt;
  </code></pre>