Why Won't this Output 100%-CodePudding

I am trying to make a progress bar, but I am trying to figure out the percentage. I have two textboxes Make sure to put the larger number in the second and it will calculate the percentage by dividing

$("#btn").click(function () {
  var num1 = $("#textbox1").val();
  var num2 = $("#textbox2").val();

  var perectageTotal = (num1 / num2) * 100;

  let totalString = perectageTotal.toString().length;

  if (totalString > 2) {
    var result = perectageTotal.toString().slice(0, 2);
  } else if ((totalString = 1)) {
    var result = "100";
  } else {
    var result = perectageTotal.toString().slice(0, 4);
  }
  console.log(parseInt(result));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="textbox1" id="textbox1" placeholder="Enter Number 1" />
<input type="textbox2" id="textbox2" placeholder="Enter Number 2" />
<input type="button" value="Click Me" id="btn" />

them, it works but dividing the same number to get 100% does not work, it only output 10. Why?

CodePudding user response：

dividing the same number to get 100% does not work, it only out put 10. Why??

You are slicing off the end here: var result = perectageTotal.toString().slice(0, 2);

You can replace that 2 with a 4 to get your expected result.

$("#btn").click(function() {
  var num1 = $("#textbox1").val();
  var num2 = $("#textbox2").val();

  var perectageTotal = (num1 / num2) * 100;

  let totalString = perectageTotal.toString().length;
  if (totalString > 2) {
    var result = perectageTotal.toString().slice(0, 4);
  } else if ((totalString = 1)) {
    var result = "100";
  } else {
    var result = perectageTotal.toString().slice(0, 4);
  }
  console.log(parseInt(result));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="textbox1" id="textbox1" placeholder="Enter Number 1" />
<input type="textbox2" id="textbox2" placeholder="Enter Number 2" />
<input type="button" value="Click Me" id="btn" />

The block of logic at the end seems to do nothing. Also don't use var anymore and extract your code into a function so you can explain what it does.

You can Math.floor, Math.ceil or Math.round to always round down to the nearest integer, always round up to the nearest integer, or to round to the nearest integer respectively.

function divisionToPercentageString(numerator, denominator) {
  return Math.round(numerator / denominator * 100).toString()   '%';
}

$("#btn").click(function() {
  const num1 = $("#textbox1").val();
  const num2 = $("#textbox2").val();

  const result = divisionToPercentageString(num1, num2);
  console.log(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="textbox1" id="textbox1" placeholder="Enter Number 1" />
<br />
<input type="textbox2" id="textbox2" placeholder="Enter Number 2" />
<br />
<input type="button" value="Click Me" id="btn" />

CodePudding user response：

In your first if statement

if (totalString > 2) { var result = perectageTotal.toString().slice(0, 2); }

'100' has a length of 3 and will therefore fall into this category and only take the first 2 characters.