The problem with multiplication and return-CodePudding

I can't figure it out, for example the following code:

let baseMoney
  , min   = 3
  , max   = 10
  , price = 100
  ;
$('.cnt samp').click(function() {
  let self = $(this),
    prices = $('.price');
  if (!baseMoney) {
    baseMoney = price;
  }
  if (!self.hasClass('act')) {
    if (max > $('.act').length) {
      self.addClass('act');
    }
    if (max <= $('.act').length) {
      $('.cnt samp:not(.act)').addClass('disable');
    }
  } else {
    $('.cnt samp:not(.act)').removeClass('disable');
    self.removeClass('act');
  }
  if (min < $('.act').length) {
    price = parseFloat(baseMoney) * parseFloat($('.act').length - min);
    prices.text(price.toFixed(2));
  } else {
    prices.text(baseMoney.toFixed(2));
  }
});

.act {
  background : rgb(0 201 34 / 80%)!important;
  }
.grid {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : 35px;
  height          : 35px;
  background      : #000;
  margin          : 5px;
  cursor          : pointer;
  color           : white;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <p >
    Цена:
    <span >100.00</span>
    RUB
  </p>
  <samp >0</samp><samp >1</samp>
  <samp >2</samp><samp >3</samp>
  <samp >4</samp><samp >5</samp>
  <samp >6</samp><samp >7</samp>
  <samp >8</samp><samp >9</samp>
  <samp >10</samp><samp >11</samp>
  <samp >12</samp><samp >13</samp>
  <samp >14</samp><samp >15</samp>
  <samp >16</samp><samp >17</samp>
  <samp >18</samp><samp >19</samp>
  <samp >20</samp>
</div>

I need that when selecting elements, if more than min is already selected, the number starts multiplying by itself.

That is, for example, there is 100, 4 is chosen, there will be 200, 5 will be chosen, there will be 400, 6 will be chosen, there will be 800, etc.

But, it is also necessary to decrease, if the choice is removed, it was 6, 1 was removed, it became 5, then it will be 400.

How can this be done?

CodePudding user response：

To make the price double each time, you need to use powers of 2, not multiplication. You can use the ** exponentiation operator.

There's no need to call parseFloat(), since these variables are all numbers.

let baseMoney, min = 3, max = 10, price = 100;
$('.cnt samp').click(function() {
  let self = $(this), prices = $('.price');
  if (!baseMoney) {
    baseMoney = price;
  }
  if (!self.hasClass('act')) {
    if (max > $('.act').length) {
      self.addClass('act');
    }
    if (max <= $('.act').length) {
      $('.cnt samp:not(.act)').addClass('disable');
    }
  } else {
    $('.cnt samp:not(.act)').removeClass('disable');
    self.removeClass('act');
  }
  if (min < $('.act').length) {
    price = baseMoney * 2 ** ($('.act').length - min);
    prices.text(price.toFixed(2));
  } else {
    prices.text(baseMoney.toFixed(2));
  }
});

.act{background:rgb(0 201 34 / 80%)!important;}
.grid{display:inline-flex;align-items:center;justify-content:center;width:35px;height:35px;background:#000;margin:5px;cursor:pointer;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ><p >Цена: <span >100.00</span> RUB</p> <samp >0</samp><samp >1</samp><samp >2</samp><samp >3</samp><samp >4</samp><samp >5</samp><samp >6</samp><samp >7</samp><samp >8</samp><samp >9</samp><samp >10</samp><samp >11</samp><samp >12</samp><samp >13</samp><samp >14</samp><samp >15</samp><samp >16</samp><samp >17</samp><samp >18</samp><samp >19</samp><samp >20</samp></div>