CODEWITHSUNDEEP
jquery
Mark Gerryl Mirandilla
Mark Gerryl Mirandilla

Reputation: 823

Increment and decrement percentage

I'm working on a simple counter where it increase and decrease by 1 depends on what operation it choose. My problem is, when I tried to convert to percentage like 0.1% as default then it increase or decrease by 0.1%.

The counter didn't work anymore.

Thanks, hope you understand me.

CODEPEN

var $input = $(".counter-percentage input");

$input.val(1);

$(".counter-percentage .operation").click(function() {
  if ($(this).hasClass('add'))
    $input.val(parseInt($input.val()) + 1);
  else if ($input.val() >= 2)
    $input.val(parseInt($input.val()) - 1);
});
ul li {
  float: left;
  list-style-type: none;
  border-top: 1px solid rgba(247, 204, 131, 0.3);
  border-right: 1px solid rgba(247, 204, 131, 0.3);
  border-bottom: 1px solid rgba(247, 204, 131, 0.3);
  height: 20px;
  text-align: center;
}

ul li:first-child {
  border: 1px solid rgba(247, 204, 131, 0.3);
  width: 20px;
}

ul li:nth-child(2) {
  width: 75px;
}

ul li:last-child {
  width: 20px;
}

ul li input {
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
}

ul li.operation {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="counter-percentage">
  <li class="operation minus">-</li>
  <li>
    <span class="value"></span>
    <input type="text" name="" readonly>
  </li>
  <li class="operation add">+</li>
</ul>

Upvotes: 0

Views: 1195

Answers (2)

Mustkeem K
Mustkeem K

Reputation: 8758

use this keyword instead of direct fatching input from dom

$(this).closest('.closest-ancester')

in this way impect will be on current value only

Upvotes: 0

void
void

Reputation: 36703

You just need to convert 0.x% to 0.x and then compare this value and increment and decrement accordingly. Instead of parseInt() I am using + unary operator to convert string to number as parseInt will make 0.1 to 0.

var $input = $(".counter-percentage input");

$input.val("0.1%");

$(".counter-percentage .operation").click(function() {
  var val = +$input.val().replace("%", "");
  console.log(val);
  if ($(this).hasClass('add'))
    $input.val(Math.round((val + 0.1)*10)/10+'%');
  else if (val >= 0.2)
    $input.val(Math.round((val - 0.1)*10)/10+'%');
});
ul li {
  float: left;
  list-style-type: none;
  border-top: 1px solid rgba(247, 204, 131, 0.3);
  border-right: 1px solid rgba(247, 204, 131, 0.3);
  border-bottom: 1px solid rgba(247, 204, 131, 0.3);
  height: 20px;
  text-align: center;
}

ul li:first-child {
  border: 1px solid rgba(247, 204, 131, 0.3);
  width: 20px;
}

ul li:nth-child(2) {
  width: 75px;
}

ul li:last-child {
  width: 20px;
}

ul li input {
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
}

ul li.operation {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="counter-percentage">
  <li class="operation minus">-</li>
  <li>
    <span class="value"></span>
    <input type="text" name="" readonly>
  </li>
  <li class="operation add">+</li>
</ul>

Upvotes: 2

Related Questions