CODEWITHSUNDEEP
javascriptjquery
Jack The Baker
Jack The Baker

Reputation: 1893

Increment decimal but right position

I am trying to make a voting system and what I have done so far is:

$('#Up').click(function() {
  var rate = $('#Rate').text();
  var math = parseInt(rate) + 1;

  $('#Rate').text(math.toFixed(1));

});

$('#Down').click(function() {
  var rate = $('#Rate').text();
  var math = parseInt(rate) - 1;

  $('#Rate').text(math.toFixed(1));

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Up">Up Vote</button>
<div id="Rate">0</div>
<button id="Down">Down Vote</button>

I want to when to push up or down vote button the number increase or decrease in decimal format but change right position of the decimal. Ex:

Increment like this: (order by upvote)

0.1 => 0.2 = > 0.3 => 0.4 => 0.5 => 0.6 => 0.7 => 0.8 => 0.9 => 1.0 => 1.1 => 1.2

What I tried change left the position of decimal, but I want to change right.

Upvotes: 0

Views: 72

Answers (4)

Scott Marcus
Scott Marcus

Reputation: 65815

Instead of adjusting the values by whole numbers and using parseInt(), adjust them by the decimal and use parseFloat().

Also, there is no need for two functions here, since they only differ by the amount they are using to adjust by. Just use one function and pass the desired increment/decrement to it. Anytime you find yourself writing code that you've already written, stop and think about how you can refactor the code to avoid that. Duplicate code swells the code base, doesn't scale well and is more difficult to debug.

Lastly, it is a best-practice to set your variables to DOM objects (or, in the case of JQuery, sets of DOM objects), rather than specific properties of objects (like .text()) because if you wind up needing a different property of the same object later, you have to re-query the DOM for the object reference. And, it is common convention that when you reference a JQuery object that you prefix it with $ to remind you and others that it's not a DOM object reference but a JQuery reference.

var $rate = $('#Rate');

var result = null; // This is the variable that will store the most recent value

$('#Up').on("click", function(){ adjust(.1) });
$('#Down').on("click", function(){ adjust(-.1) });

function adjust(val){
  result = (parseFloat($rate.text()) + val).toFixed(1);
  $rate.text(result);
  console.log(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Up">Up Vote</button>
<div id="Rate">0</div>
<button id="Down">Down Vote</button>

Upvotes: 2

charlietfl
charlietfl

Reputation: 171689

Another way is store the rate as data attribute. JQuery data() will automatically cast numerical values to number

$('#Up').click(function() {
  adjustRate(.1);
});

$('#Down').click(function() {
  adjustRate(-.1);
});

var $rate = $('#Rate');

function adjustRate(val) { 
  $rate.text(($rate.data().rate += val).toFixed(1));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Up">Up Vote</button>
<div id="Rate" data-rate="0">0</div>
<button id="Down">Down Vote</button>

Upvotes: 1

Emre Kabaoglu
Emre Kabaoglu

Reputation: 13146

So, just try to parse it as float instead of int;

$('#Up').click(function() {
  var rate = $('#Rate').text();
  var math = parseFloat(rate) + 0.1;

  $('#Rate').text(math.toFixed(1));

});

$('#Down').click(function() {
  var rate = $('#Rate').text();
  var math = parseFloat(rate) - 0.1;

  $('#Rate').text(math.toFixed(1));

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Up">Up Vote</button>
<div id="Rate">0</div>
<button id="Down">Down Vote</button>

Upvotes: 1

Eddie
Eddie

Reputation: 26844

  1. Use Number() to convert string to number.
  2. increment/decrement by 0.1

$('#Up').click(function() {
  var rate = $('#Rate').text();
  var math = Number(rate) + 0.1;

  $('#Rate').text(math.toFixed(1));

});

$('#Down').click(function() {
  var rate = $('#Rate').text();
  var math = Number(rate) - 0.1;

  $('#Rate').text(math.toFixed(1));

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Up">Up Vote</button>
<div id="Rate">0</div>
<button id="Down">Down Vote</button>

Upvotes: 2

Related Questions