CODEWITHSUNDEEP
javascriptjqueryeachpercentage
Igor
Igor

Reputation: 673

Calculate percent of each element

I've the following code to calculate the percentage of each element (like poll voting system):

$(document).ready(function() {
    $("#percentage").click(function() {
        var number, sumNumbers = 0, newPercent;
    
        $(".item").each(function() {
            number = $(this).children(".itemNum").text();
            number = +number;

            sumNumbers += number;

            if(sumNumbers != 0) {
              newPercent = (number / sumNumbers) * 100;
            } else {
              newPercent = 0;
            }

            $(this).children(".percentage").text(newPercent+"%");
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item">
  <span class="itemNum">0</span> <span class="percentage"></span>
</div>

<div class="item">
  <span class="itemNum">2</span> <span class="percentage"></span>
</div>

<div class="item">
  <span class="itemNum">1</span> <span class="percentage"></span>
</div>

<button id="percentage">Calculate Percentage!</button>

But, the result is:

0 0%
2 100%
1 33.33333333333333%

So, how to calculate return the following result?

0 0%
2 66.66666666666667%
1 33.33333333333333%

I need these results to do a progress bar on my poll system, so, how to do this?

Upvotes: 0

Views: 1145

Answers (1)

user6068334
user6068334

Reputation:

You need to parse the text to integer via parseInt() function.

And you need first to sum numbers and then you can calculate percentage.

For one loop question:
You can't count percentage in one loop. Explained here 

$(document).ready(function() {
    $("#percentage").click(function() {
        var number, sumNumbers = 0, newPercent;
         $(".item").each(function(){
               number = $(this).children(".itemNum").text();
               sumNumbers += parseInt(number);
               
          });
        $(".item").each(function() {
            number = parseInt($(this).children(".itemNum").text());

            if(sumNumbers != 0) {
              newPercent = (number / sumNumbers) * 100;
            } else {
              newPercent = 0;
            }

            $(this).children(".percentage").text(newPercent+"%");
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item">
  <span class="itemNum">0</span> <span class="percentage"></span>
</div>

<div class="item">
  <span class="itemNum">2</span> <span class="percentage"></span>
</div>

<div class="item">
  <span class="itemNum">1</span> <span class="percentage"></span>
</div>

<button id="percentage">Calculate Percentage!</button>

Upvotes: 3

Related Questions