title: how to add input value to counter value?
body: <p>I'm trying to have a counter that can respond to input values and add it to displayed count but continue to count by 1. The count starts at 0. I have the counter working with buttons, but not with the added input.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let decreaseBtn = document.getElementById("buttonDecrease");
  let increaseBtn = document.getElementById("buttonIncrease");
  let counter = document.getElementById("counter");
  let inputValue = document.getElementById("quantity").inputValue
  let count = 0;
  
  decreaseBtn.addEventListener("click", () =&gt; {
    count--;
    counter.innerHTML = count;
    counterStyle();
  });
  
  increaseBtn.addEventListener("click", () =&gt; {
    count++;
    counter.innerHTML = count;
    counterStyle();
  });
  
  function counterStyle() {
    if (count &lt; 0) {
      counter.classList.add("negative");
    } else if (count &gt; 0) {
      counter.classList.add("positive");
    } else {
      counter.classList.remove("negative");
      counter.classList.remove("positive");
    }
  }
  
  function addInput() {
    console.log(inputValue)
  }
  addInput();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 id="counter"&gt;0&lt;/h1&gt;
  &lt;div id="button__wrapper"&gt;
    &lt;button id="buttonDecrease"&gt;-&lt;/button&gt;
    &lt;input type="text" id="quantity" value="1"&gt;
    &lt;button id="buttonIncrease"&gt;+&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>