Простой калькулятор вычисляет неправильный

Question

Раньше я спрашивал о той же теме, простой калькулятор, но поток теперь немного загроможден и больше не обновляется. Надеюсь, меня это раздражает, но я нахожу новую тему полезной.

У меня есть упражнение JavaScript, которое нужно выполнить, чтобы сценарий калькулятора, который имеет почти ту же функциональность, что и встроенный Windows (7). Это означает, что у вас есть одно поле для ввода некоторых значений и небольшое значение, которое отображает ранее введенное значение плюс расчетную операцию.

Пользователь прислал мне код для моих потребностей, который мне понравился из-за его простоты, и я попытался его адаптировать.

В настоящее время я работаю, чтобы получить только одну операцию, чтобы работать, но позже будет три другие основные операции, квадратный корень, и т.д ..

Все работает просто отлично теперь, только, что вид тревожного, вычисляющего себя нет. Например: если вы введете 5 + 5 (или любое другое число), тогда щелкните по равным, ничего не произойдет. Если вы затем снова вводите любое число (нажмите «плюс» до), а затем нажмите «равно», это даст вам абсолютно случайный результат или результат вашего предыдущего расчета.

Это то, что я получил:

var number = 0;     //the result 
var operation = ' ';    //the chosen calculating operation 
var temp_Val = 0;     //the last entered value (for the subdisplay) 

var print_equal = function() { 
    var displayVal = document.getElementById("display");   
    displayVal.value = number;         
}; 

var num_add = function() { 
    var displayVal = document.getElementById("display");   
    temp_Val = displayVal.value; //saves the value of the display (for the subdisplay) 
    console.log(temp_Val);  //schreibt den Wert des Displays auf die Konsole 
    number += parseFloat(displayVal.value); //calculates the result 
    operation = '+';    //saves the used operation (for the subdisplay) 
    print_subdisplay();   //runs the function that's building the value of the subdisplay 
    displayVal.value = "";    //resets the main display 
}; 

var print_subdisplay = function() { 
    var subdisplayVal = document.getElementById("subdisplay"); 
    subdisplayVal.value = temp_Val + operation; //creates a String with both the first entered value and the operation 
}; 

HTML:

<!-- Displays --> 
     <input type="text" name="display" id="display" value="0" class="display"> 
     <input type="text" name="subdisplay" id="subdisplay" class="subdisplay" readonly> 

<!-- Calculating operations --> 
     <input type="button" onclick="print_equal()" id="equal" value="="> 
     <input type="button" onclick="num_add()" id="plus" value="+"> 

<!-- Reset --> 
     <input type="button" value="C" onClick="reset()" class="reset"> 

Вот JSFiddle: http://jsfiddle.net/hJfFd/1/

я нашел бы это невероятно хорошо, если бы вы могли бы мне помочь, так как я Здесь я сижу, пытаясь заставить его работать с почти 4 часов (включая исследования). Заранее спасибо!

Answer 1

Вот решение, которое должно помочь вам приступить к реализации остальной части калькулятора. Я бы порекомендовал пройти и добавить ваши комментарии еще раз. И понять, что делает каждая строка кода. Хороший способ сделать это будет, если вы запутались в строке кода, вытащите его, а затем поиграйте с калькулятором, и вы увидите, почему эта строка кода была добавлена ​​и т. Д. Удачи!

var number = 0;             //the result 
var operation = ' ';           //the chosen calculating operation 
var temp_Val = 0;            //the last entered value (for the subdisplay) 

var print_equal = function() { 
    var displayVal = document.getElementById("display"); 
    var subdisplayVal = document.getElementById("subdisplay"); 
    if(subdisplayVal.value == '') 
    return false; 
    temp_Val = displayVal.value; 
    if(temp_Val == '') 
    temp_Val = 0; 
    if(operation == '+') 
    number += parseFloat(temp_Val); 
    subdisplayVal.value = ""; 
    displayVal.value = number; 
    temp_Val = 0; 
    number = 0; 
    operation = ' '; 
}; 

var num_add = function() { 
    var displayVal = document.getElementById("display");  
    temp_Val = displayVal.value; 
    if(temp_Val == '') 
    return false; 
    if(operation == '+') 
    number += parseFloat(displayVal.value); 
    else 
    number = parseFloat(displayVal.value);      
    operation = '+';           
    print_subdisplay();           
    displayVal.value = "";           
}; 

var print_subdisplay = function() { 
    var subdisplayVal = document.getElementById("subdisplay"); 
    subdisplayVal.value = number + operation; 
}; 

function reset() { 
    number = 0; 
    operation = ' '; 
    var displayVal = document.getElementById("display"); 
    displayVal.value = "0"; 
    var subdisplayVal = document.getElementById("subdisplay"); 
    subdisplayVal.value = ""; 
} 

http://jsfiddle.net/CpvqR/21/

Answer 2

В коде есть логическая ошибка. Если вы будете следовать этой последовательности шагов, он будет работать, как ожидалось:

1) введите 5

2) Нажмите +

3) входят 5

3) Нажмите кнопку + еще раз

4) Нажмите =

В этот момент 10 появится в поле «output». Поэтому ваша функция print_equal() должна каким-то образом выполнить окончательный расчет ДО того, как он выводит результат на экран, поскольку последняя операция (в данном случае операция +) не выполняется.

Answer 3

Есть два простых проблем с текущей реализации.

1) Вам необходимо убедиться в том, что все входные данные считываются с displayVal. Если вы этого не сделаете, вы будете хранить строки в переменных, которые, по вашему мнению, являются целыми числами (поскольку JavaScript свободно набирается). Заменить строку, в которой вы присваиваемое temp_Val с

temp_Val = parseFloat(displayVal.value); 

2) Ваша кнопка = необходимо сделать фактическую математическую операцию (или, по крайней мере, это то, как работают большинство калькуляторов). Заменить второй строке вашего print_equal функции с

displayVal.value = parseFloat(displayVal.value) + temp_Val; 

Очевидно, есть и другие вещи, которые вам нужно беспокоиться о (например, с помощью правильной работы), но это должно, по крайней мере, чтобы вы собираетесь.

Answer 4

Однажды назад я написал очень простую известково в JS CSS3 и HTML5

Пример

http://jsfiddle.net/trjsJ/

Js

function calc(e){ 
var a=e.target.innerText,b=this.firstChild; 
b.value=a=='='?eval(b.value):a=='C'?'':b.value+a; 
} 
var gui=document.createElement('div'); 
gui.className='clc'; 
gui.innerHTML='<input><div>'+('789+456-123*C0./='.split('').join('</div><div>'))+'</div>'; 
gui.addEventListener('click',calc,false); 

window.onload=function(){ 
document.body.appendChild(gui); 
} 

CSS3

body,html{ 
height:100%; 
margin:0; 
padding:0; 
background-color:#666; 
} 
*{ 
box-sizing:border-box; 
} 
.clc{ 
width:256px; 
height:320px; 
clear:both; 
} 
.clc>*{ 
border:4px solid #666; 
border-radius:4px; 
font:normal normal bold 20px/56px Arial,Helvetica,sans-serif; 
border-radius:10px; 
} 
.clc>input{ 
width:100%; 
height:20%; 
text-align:right; 
padding:0 20px; 
} 
.clc>div{ 
width:25%; 
height:20%; 
background-color:#5a5a5a; 
color:#fff; 
text-align:center; 
float:left; 
} 
.clc>div:nth-child(4n+1){ 
background-color:#f36573; 
} 
.clc>div:nth-last-child(1){ 
width:100%; 
background-color:#ffb343; 
}