title: Price incrementor / decrementor
body: <p>I developed a little program using JavaScript. The program was to:</p>
  <ul>
  <li>increment or decrement the item unit (or quantity) by 1</li>
  <li>increment or decrement the item price by the initial price.</li>
  </ul>
  <p>I thought I got it right until I noticed the following glitches:</p>
  <ol>
  <li>After reloading the page, <strong>first click the plus button,</strong> you will see that the price does not add up according to the initial price. I wanted the program to add up per the initial price, instead of doubling and doubling. Now click the minus button, it goes straight to zero, when instead, it should decrement the same way it incremented.</li>
  <li>After reloading the page, <strong>first click the minus button,</strong> <em>you will see that the item counter goes below 1</em>, when instead, this should not happen. (I wanted the unit counter to be nothing less than 1 and nothing more than 100)</li>
  </ol>
  <p>I do not know for sure if there could be any other glitch I may not have included but any way, here is the code I wrote:</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 price_section = document.querySelectorAll('main div.prices div.price_section')
  
  price_section.forEach(function(pr_sec) {
    let priceValue = pr_sec.querySelector('div.main_price span');
    let buttonMinus = pr_sec.querySelector('span.minus_btn');
    let buttonPlus = pr_sec.querySelector('span.plus_btn');
    let button = pr_sec.querySelectorAll('span.btn');
    let buttonText = pr_sec.querySelector('span.item_amt');
  
    // variable acting as counter
    let index = 1;
    let newPrice = Number(priceValue.textContent)
  
    // eventListener to listen if you clicked on the minus button
    buttonMinus.addEventListener('click', function() {
      // lowers the counter by 1
      index--;
      newPrice -= newPrice;
      // runs next function
      updateText();
    })
  
    // eventListener to listen if you clicked on the plus button
    buttonPlus.addEventListener('click', function() {
      // raises the counter by 1
      index++;
      newPrice += newPrice;
      // runs next function
      updateText();
    })
  
    // function to updates the text
    function updateText() {
      // updates the text
      buttonText.textContent = index;
      priceValue.textContent = newPrice;
  
      // adds or removes the deactivated class depending if the index is 1 or not
      switch (index) {
        case 1:
          buttonMinus.classList.add('deactivated');
          break;
  
        case 100:
          buttonPlus.classList.add('deactivated');
          break;
  
        default:
          button.forEach(el =&gt; el.classList.remove('deactivated'));
          break;
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>main {
    border: 1px solid #000;
    width: 300px;
    font-family: 'Segoe UI';
  }
  
  main div.prices {
    display: grid;
    grid-row-gap: 20px;
    justify-content: center;
    padding: 10px;
  }
  
  main div.prices div.price_section {
    text-align: center;
  }
  
  main div.prices&gt;div div.main_price {
    /*text-align: center;*/
    font-size: 20px;
  }
  
  div.price_counter span.item_amt {
    font-size: 20px;
  }
  
  div.price_counter span.btn {
    cursor: pointer;
  }
  
  span.btn.deactivated {
    cursor: not-allowed;
    pointer-events: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
    &lt;div class="prices"&gt;
      &lt;div class="price_section"&gt;
        &lt;div class="main_price"&gt;$ &lt;span&gt;10000&lt;/span&gt;&lt;/div&gt;
        &lt;div class="price_counter"&gt;
          &lt;span class="btn minus_btn"&gt;&amp;#x2796;&lt;/span&gt;
          &lt;span class="item_amt"&gt;1&lt;/span&gt;
          &lt;span class="btn plus_btn"&gt;&amp;#x2795;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="price_section"&gt;
        &lt;div class="main_price"&gt;$ &lt;span&gt;4000&lt;/span&gt;&lt;/div&gt;
        &lt;div class="price_counter"&gt;
          &lt;span class="btn minus_btn"&gt;&amp;#x2796;&lt;/span&gt;
          &lt;span class="item_amt"&gt;1&lt;/span&gt;
          &lt;span class="btn plus_btn"&gt;&amp;#x2795;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="price_section"&gt;
        &lt;div class="main_price"&gt;$ &lt;span&gt;850&lt;/span&gt;&lt;/div&gt;
        &lt;div class="price_counter"&gt;
          &lt;span class="btn minus_btn"&gt;&amp;#x2796;&lt;/span&gt;
          &lt;span class="item_amt"&gt;1&lt;/span&gt;
          &lt;span class="btn plus_btn"&gt;&amp;#x2795;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="price_section"&gt;
        &lt;div class="main_price"&gt;$ &lt;span&gt;1635&lt;/span&gt;&lt;/div&gt;
        &lt;div class="price_counter"&gt;
          &lt;span class="btn minus_btn"&gt;&amp;#x2796;&lt;/span&gt;
          &lt;span class="item_amt"&gt;1&lt;/span&gt;
          &lt;span class="btn plus_btn"&gt;&amp;#x2795;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I would be so grateful if a superhuman could help me solve this conundrum.</p>