Price incrementor / decrementor

Question

I developed a little program using JavaScript. The program was to:

increment or decrement the item unit (or quantity) by 1
increment or decrement the item price by the initial price.

I thought I got it right until I noticed the following glitches:

After reloading the page, first click the plus button, 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.
After reloading the page, first click the minus button, you will see that the item counter goes below 1, when instead, this should not happen. (I wanted the unit counter to be nothing less than 1 and nothing more than 100)

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:

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 => el.classList.remove('deactivated'));
        break;
    }
  }
})

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>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;
}

I would be so grateful if a superhuman could help me solve this conundrum.

Dimitris Maragkos · Answer

You need a new variable that will hold the actual price:

let index = 1;
let price = Number(priceValue.textContent);
let newPrice = Number(priceValue.textContent);

Then when you add do newPrice += price and when you subtract newPrice -= price.

Also add a call to updateText() during initialization because when the page loads the minus button remains active even though qty is 1.

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 price = Number(priceValue.textContent);
  let newPrice = Number(priceValue.textContent);
  
  updateText();

  // eventListener to listen if you clicked on the minus button
  buttonMinus.addEventListener('click', function() {
    // lowers the counter by 1
    index--;
    newPrice -= price;
    // 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 += price;
    // 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 => el.classList.remove('deactivated'));
        break;
    }
  }
})

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>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;
}

Ehsan Ilahi · Answer

Only Update in JS it will work for you.

   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)
  let basePrice = Number(priceValue.textContent);

  // eventListener to listen if you clicked on the minus button
  buttonMinus.addEventListener('click', function() {
    // lowers the counter by 1
    index--;
    newPrice -= basePrice;
    // 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 += basePrice;
    // 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 => el.classList.remove('deactivated'));
        break;
    }
  }
})

Price incrementor / decrementor

2 Answers