Математический ввод, вычисление и вывод Javascript с делениями/децималами

Мне было интересно, если бы программа в Javascript могла получать дроби в качестве входных данных и использовать эти дроби для вычисления определенных значений. Я попытался сделать калькулятор процентной разницы (физики), который использует формулу ((| max-min |)/((max + min)/2)) * 100. Я уже понимаю, как манипулировать вводом и разбивать его на массив. Таким образом, я сохранил значения max и min в val1 и val2. Однако проблема связана с вычислением. Первоначально я собрал всю формулу в одном заявлении, но это не сработало. Таким образом, я разделил вычисления на этапы и сохранил значение в переменных после каждого шага, чтобы убедиться, что он правильно выполнил вычисления. Это то, что у меня есть:Математический ввод, вычисление и вывод Javascript с делениями/децималами

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 будет FAR отличным от того, будут ли размещены 9/10 и 89/100. Случайно, ввод десятичных знаков возвращает 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>

источник

2016-07-17 Andrew T.

Что такое вход? Что ожидается выход? Что такое текущий выход? – Rayon

Просьба привести конкретные примеры буквального ввода в поле ввода * term *, для которого результат не такой, как вы ожидаете. Вы говорите, что иногда получаете * NaN *: не ожидайте, что мы отправимся на этот случай, но предоставим нам информацию, когда это произойдет. – trincot

Похоже, вы ожидаете JavaScript признать дроби как 12/100 как числовые значения при применении parseInt к ним.

Это не так, потому что:

Деление (/) является оператором в JavaScript (и в большинстве других языков), а не числовое обозначение (например, десятичной .). Символы, подобные /, не допускаются в числовых литералах.
Даже если вы вводите числа в виде десятичных знаков (например, 15.89), функция parseInt будет игнорировать десятичные части - это имя parseInt уже раскрывает это поведение. Вы должны использовать parseFloat, или короче, применить единицу + к строке, которая неявно преобразует ее в число.

Чтобы решить эту проблему, вы можете написать функцию, которая превращает дробные обозначения в числа, которые они представляют. Я назвал эту функцию оценить в приведенном ниже фрагменте кода:

// 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: обратите внимание, что вы можете использовать атрибут readonly в HTML - не нужно, чтобы установить это с помощью JavaScript.

источник

2016-07-17 08:27:24 trincot

Ничего себе, вы очень подробно ответили на оба моих вопроса И добавили еще одну вещь, которую я не знал в самом конце. Я впечатлен. :) –

Математический ввод, вычисление и вывод Javascript с делениями/децималами

ответ

Смежные вопросы