CODEWITHSUNDEEP
javascriptmathcalculator
Andrew T.
Andrew T.

Reputation: 25

Math Input, Calculate, and Output Javascript with Fractions/Decimals

I was wondering if it was possible for a program in Javascript to receive fractions as input and use these fractions to calculate certain values. I have attempted to make a calculator of percentage difference (physics) which uses the formula ((|max-min|)/((max+min)/2))*100. I already understand how to manipulate the input and split it in an array. As such, I stored the max and min values in val1 and val2. However, the issue comes with the computation. Originally I clumped the whole formula in a single statement, but it didn't work. Thus, I separated the calculations into steps and stored the value in variables after each step to make sure it did the computations properly. This is what I have:

var step1=Math.abs(val1-val2);
var step2=val1+val2;
var step3=step2/2;
var step4=step1/step3;
var final=Math.round(step4*100*100)/100;

However, there are still a lot of glitches going on with the computations, especially with fractions and decimals. For example, the percentage value when 90/100 and 89/100 are inputted would be FAR different from if 9/10 and 89/100 are placed. Occassionally, inputting decimals return NaN. I really don't understand what's going on. Anyone who can highlight what's wrong with the above code in computing percentage difference or teach me how Javascript computes and show how the computations are in line with the outputs I receive would definitely help.

Thank You. :)

If it's any help, this is the full code of the program. You can ignore this if it isn't necessary in solving the problem. I've deleted all completely unnecessary parts of the code to the problem.

<html>

<head>
  <title></title>
</head>
<style type="text/css">
</style>
<script>
  var def;

  function submit() {
    var e = document.getElementById("topic");
    var ter = document.getElementById("term").value;
    var strUser = e.options[e.selectedIndex].value;

    if (!strUser) {
      document.getElementById("textcom").value = "Please specify what needs to be solved.";
    }
    else if (!term) {
      document.getElementById("textcom").value = "Please specify the values used to calculate.";
    }
    else {
      if (strUser == "a") {
        var arr = ter.split(",");
        var val1 = parseInt(arr[0]);
        var val2 = parseInt(arr[1]);

        if (arr.length > 2 || arr.length < 2) {
          def = "Error. Incorrect number of values written.";
        }
        else if (isNaN(val1) || isNaN(val2)) {
          def = "Error. One or more values input is/are not a number.";
        }
        else {
          var step1 = Math.abs(val1 - val2);
          var step2 = val1 + val2;
          var step3 = step2 / 2;
          var step4 = step1 / step3;
          var final = Math.round(step4 * 100 * 100) / 100;
          def = final + "%";
        }
      }
      document.getElementById("textcom").value = def;
    }
  }
</script>

<body>
  <h1>Physics Calculator</h1>
  <span>Please choose desired solution:</span>
  <select id="topic">
    <option disabled selected value>------ Option ------</option>
    <option value="a">Percent Difference</option>
  </select>
  <br>
  <span>Values:</span>
  <input type="text" id="term"></input>
  <br>
  <br>
  <textarea rows="20" cols="40" id="textcom">Uneditable. For output purposes only.</textarea>
  <br>
  <button onclick="submit()">Submit</button>
  <script>
    document.getElementById("textcom").readOnly = "true";
  </script>
</body>
</html>

Upvotes: 0

Views: 1259

Answers (1)

trincot
trincot

Reputation: 350157

It seems like you expect JavaScript to recognise fractions like 12/100 as numerical values when applying parseInt to them.

This is not the case because:

  • A division (/) is an operator in JavaScript (and most other languages), not a numerical notation (like the decimal .). Characters like / are not allowed in numerical literals.
  • Even if you enter numbers as decimals (like 15.89), the function parseInt will ignore the decimal parts -- the name of parseInt already reveals this behaviour. You should use parseFloat, or shorter, apply the unitary + to the string, which implicitly converts it to a number.

To solve this, you could write a function that turns fractional notations into the numbers they represent. I have called that function evaluate in the snippet below:

// To interpret fractions (with '/') as numbers:
function evaluate(term) {
  // remove spaces and get numerator and denominator
  var arr = term.replace(/ /g, '').split('/');
  // get part before '/' and turn into number
  var val = +arr.shift();
  // read denominator(s) and perform division(s)
  while (arr.length) { 
    val = val / +arr.shift();
  }
  return val;
}

function submit() {
  var e = document.getElementById("topic");
  var ter = document.getElementById("term").value;
  var strUser = e.options[e.selectedIndex].value;
  var def;

  if (!strUser) {
    def = "Please specify what needs to be solved.";
  }
  else if (!term) {
    def = "Please specify the values used to calculate.";
  }
  else if (strUser == "a") {
    var arr = ter.split(",");
    var val1 = evaluate(arr[0]);
    var val2 = evaluate(arr[1]);

    if (arr.length !== 2) {
      def = "Error. Incorrect number of comma-separated values written; two expected.";
    }
    else if (isNaN(val1) || isNaN(val2)) {
      def = "Error. One or more values input is/are not a number.";
    }
    else {
      var step1 = Math.abs(val1 - val2);
      var step2 = val1 + val2;
      var step3 = step2 / 2;
      var step4 = step1 / step3;
      var final = Math.round(step4 * 100 * 100) / 100;
      def = final + "%";
    }
  }
  document.getElementById("textcom").value = def;
}
<span>Please choose desired solution:</span>
<select id="topic">
  <option disabled selected value>------ Option ------</option>
  <option value="a" selected>Percent Difference</option>
</select>
<br>
<span>Values:</span>
<input type="text" id="term"></input>
<br>
<br>
<textarea readonly rows="3" cols="40" id="textcom">Uneditable. For output purposes only.</textarea>
<br>
<button onclick="submit()">Submit</button>

NB: note that you can use the readonly attribute in HTML -- no need to set this via JavaScript.

Upvotes: 1

Related Questions