Rounding Percentages

by jorgeluis

HTML

<label for="count">Count</label>
<input id="count" type="number">

<br>of

<label for="total">Total</label>
<input id="total" type="number">


<br><br>
Round:
<span id="round-display"></span>

<br>
Round w One Decimal:
<span id="round-one-decimal-display"></span>

<br>
Round w One Decimal Down:
<span id="round-one-decimal-down-display"></span>



<br><br>
Actual percentage:
<span id="actual-perc"></span>

JavaScript

function roundOneDecimal (count, total) {
  if (total == '' || total === 0) {
    return 0
  } else {
    return Math.round((count / total * 100) * 10) / 10
  }
}

function roundOneDecimalDown (count, total) {
  if (total == '' || total === 0) {
    return 0
  } else {
    return Math.floor((count / total * 100) * 10) / 10
  }
}

function actualPercentage (count, total) {
  if (total == '' || total === 0) {
    return 0
  } else {
    return count / total * 100
  }
}


function displayPercentages () {
	roundDisplay.innerHTML = Math.round(count.value / total.value * 100);
	roundOneDecimalDisplay.innerHTML = roundOneDecimal(count.value, total.value);
	roundOneDecimalDownDisplay.innerHTML = roundOneDecimalDown(count.value, total.value);

	actualDisplay.innerHTML = actualPercentage(count.value, total.value);

}

var count = document.getElementById('count');
var total = document.getElementById('total');
var roundDisplay = document.getElementById('round-display');
var roundOneDecimalDisplay = document.getElementById('round-one-decimal-display');
var roundOneDecimalDownDisplay = document.getElementById('round-one-decimal-down-display');
var actualDisplay = document.getElementById('actual-perc');

count.addEventListener('change', displayPercentages);
total.addEventListener('change', displayPercentages);