数学输入、计算和输出 Javascript with Fractions/Decimals

Question

我想知道 Javascript 中的程序是否可以接收分数作为输入并使用这些分数来计算某些值。我试图制作一个百分比差异计算器（物理），它使用公式 ((|max-min|)/((max+min)/2))*100。我已经了解如何操作输入并将其拆分为数组。因此，我将最大值和最小值存储在 val1 和 val2 中。然而，问题伴随着计算。最初我将整个公式集中在一个语句中，但它没有用。因此，我将计算分成几个步骤，并在每个步骤之后将值存储在变量中，以确保它正确地进行了计算。这是我的：

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;

但是，计算中仍然存在很多问题，尤其是分数和小数。例如，输入 90/100 和 89/100 时的百分比值与放置 9/10 和 89/100 时的百分比值会有很大不同。偶尔输入小数return NaN。我真的不明白这是怎么回事。任何可以突出显示上述代码在计算百分比差异方面的错误或教我如何 Javascript 计算并显示计算如何与我收到的输出一致的人肯定会有所帮助。

谢谢你。 :)

如果有帮助的话，这是程序的完整代码。如果不是解决问题的必要，可以忽略。我已经删除了问题代码中所有完全不需要的部分。

<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>

Answer 1

您似乎希望 JavaScript 在对 parseInt 应用时将 12/100 之类的分数识别为数值。

事实并非如此，因为：

除法 (/) 是 JavaScript（和大多数其他语言）中的运算符，而不是数字符号（如小数 .）。数字文字中不允许使用 / 等字符。
即使您输入小数形式的数字（如 15.89），函数 parseInt 也会忽略小数部分——parseInt 的名称已经揭示了这种行为。您应该使用 parseFloat 或更短的方式，将单一 + 应用于字符串，这会将其隐式转换为数字。

要解决这个问题，您可以编写一个函数，将小数符号转换为它们所代表的数字。我在下面的代码片段中调用了该函数 evaluate：

// 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>

注意：请注意，您可以在 HTML 中使用 readonly 属性——无需通过 JavaScript.

进行设置

数学输入、计算和输出 Javascript with Fractions/Decimals

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

javascript

math

calculator