javascript - 简易计算器计算错误

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/