Question

我一直试图获得计算器的顶部读数，以获取一系列数字和运算符（“ - ”，“+”，“*”和“/”）并输出正确的结果。我可以用两个数字来做，例如。（23.45 + 94.35），然后点击等于按钮，它确实返回正确的答案。但是在我可以进行另一次计算之前，我必须按下清除按钮。我希望能够在按下等于按钮之前继续输入新的数字和操作符并获得正确的答案，将等式保留在顶部读数上，并将计算出的答案保留在底部读数中。任何帮助，将不胜感激！！我的HTML和JavaScript包含在下面...我的CodePen链接是：http://codepen.io/RDaniels34/pen/MKXOKx

  html lang="en-US">

  <head>

  <title>RDaniels34 | Calculator</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Bitter:400,400italic|Josefin+Sans:400,300italic' rel='stylesheet' type='text/css'>

  <style>
    <!-- #main {
        width: 100px;
        height: 200px;
        border: 3px solid #c3c3c3;
        display: -webkit-flex;
        /* Safari */
        -webkit-flex-flow: row-reverse wrap;
        /* Safari 6.1+ */
        display: flex;
        flex-flow: wrap;
        justify-content: space-around;
      }

      #main div {
        width: 55px;
        height: 50px;
      }  -->
  </style>
</head>

<body style="background-color: lightyellow;">
  <header>
    <div class="header-div">
      <h1>Calculator</h1>
      <h3>Made by: RDaniels34</h3>
    </div>
  </header>

  <container class="container">

    <div class="well well-lg" id="numberDisplay">
      <div id="numberDisplay1">0</div>
      <br>
      <div id="numberDisplay2">0</div>
    </div>

    <div id="separator-line"></div>

    <div id="buttonGroup">
      <button type="button" onclick="clrFunction()" id="clr" class="btn btn-default btn-sm">C</button>
      <button type="button" onclick="divideFunction()" id="divideNum" class="divideNum operators btn btn-default btn-sm">/</button>
      <button type="button" onclick="timesFunction()" id="timesNum" class="timesNum btn btn-default btn-sm ">X</button>
      <button type="button" onclick="backspaceFunction()" id="backspace" class="backspace btn btn-default btn-sm fa fa-caret-left" style="font-size:20px"></button>
      <button type="button" onclick="sevenFunction()" id="numbers" class="numbers btn btn-default btn-sm">7</button>
      <button type="button" onclick="eightFunction()" id="numbers" class="numbers btn btn-default btn-sm">8</button>
      <button type="button" onclick="nineFunction()" id="numbers" class="numbers btn btn-default btn-sm">9</button>
      <button type="button" onclick="addFunction()" id="addNum" class="addNum btn btn-default btn-sm">+</button>
      <button type="button" onclick="fourFunction()" id="numbers" class="numbers btn btn-default btn-sm">4</button>
      <button type="button" onclick="fiveFunction()" id="numbers" class="numbers btn btn-default btn-sm">5</button>
      <button type="button" onclick="sixFunction()" id="numbers" class="numbers btn btn-default btn-sm">6</button>
      <button type="button" onclick="subtractFunction()" id="minusNum" class="minusNum btn btn-default btn-sm">-</button>
      <button type="button" onclick="oneFunction()" id="numbers" class="numbers btn btn-default btn-sm">1</button>
      <button type="button" onclick="twoFunction()" id="numbers" class="numbers btn btn-default btn-sm">2</button>
      <button type="button" onclick="threeFunction()" id="numbers" class="numbers btn btn-default btn-sm">3</button>
      <button type="button" onclick="percentFunction()" id="percentNum" class="percentNum btn btn-default btn-sm ">%</button>
      <button type="button" onclick="zeroFunction()" id="numbers" class="numbers btn btn-default btn-sm">0</button>
      <button type="button" onclick="decimalFunction()" id="numbers" class="numbers btn btn-default btn-sm ">.</button>
      <button type="button" onclick="plusminusFunction()" id="plusminus" class="plusminus btn btn-default btn-sm">+/-</button>
      <button type="button" onclick="rd34Function()" id="rd34" class="btn btn-default btn-sm">RD</button>
      <button type="button" onclick="equalsFunction()" id="equals" class="btn btn-default btn-sm">=</button>
    </div>
  </container>


  <div id="footer">
    Copyright © RDaniels34 - 2016
  </div>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="vendor/angular.js" type="text/javascript"></script>
  <script src="scripts/app.js" type="text/javascript"></script>

</body>


JavaScript

/**************************************************** 
   Mathematical Functions Buttons For Top Readout
*****************************************************/

var topNumber = [];
eval(topNumber.join(''));
///var newAnswer = topNumber; 

function clrFunction() {
  topNumber.splice(0, topNumber.length);
  document.getElementById("numberDisplay1").innerHTML = 0;
}

function divideFunction() {
  topNumber[topNumber.length] = " / ";
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

function timesFunction() {
  topNumber[topNumber.length] = " X ";
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

function backspaceFunction() {
  topNumber.splice(topNumber.length - 1, 1);
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
  if (topNumber.length == []) {
    document.getElementById("numberDisplay2").innerHTML = "";
  }
}

function subtractFunction() {
  topNumber[topNumber.length] = " - ";
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

function addFunction() {
  topNumber[topNumber.length] = " + ";
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

function percentFunction() {
  topNumber[topNumber.length] = "% ";
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

function rd34Function() {
  document.getElementById("numberDisplay1").innerHTML = "Programming is Fun!";
}

function decimalFunction() {
  topNumber[topNumber.length] = ".";
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

/********************************************* 
      Upper Display Number Button Functions 
**********************************************/

function oneFunction() {
  topNumber[topNumber.length] = 1;
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

function twoFunction() {
  topNumber[topNumber.length] = 2;
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

function threeFunction() {
  topNumber[topNumber.length] = 3;
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

function fourFunction() {
  topNumber[topNumber.length] = 4;
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

function fiveFunction() {
  topNumber[topNumber.length] = 5;
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

function sixFunction() {
  topNumber[topNumber.length] = 6;
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

function sevenFunction() {
  topNumber[topNumber.length] = 7;
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

function eightFunction() {
  topNumber[topNumber.length] = 8;
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

function nineFunction() {
  topNumber[topNumber.length] = 9;
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

function zeroFunction() {
  topNumber[topNumber.length] = 0;
  document.getElementById("numberDisplay1").innerHTML = topNumber.join("");
}

/**************************************************** 
   Mathematical Function Buttons For Bottom Readout
*****************************************************/

$(document).ready(function() {

  var testNumLength = function(firstNumber) {
    if (firstNumber.length > 9) {
      $("#numberDisplay2").text(firstNumber.substr(firstNumber.length - 9, 9));
      if (firstNumber.length > 15) {
        $("#numberDisplay1").text(firstNumber.substr(firstNumber.length - 15, 15));
        firstNumber = "";
        $("#numberDisplay2").text("Err");
      }
    }
  }
  var topNumber = "";
  //var firstNumber = "";
  var secondNumber = "";
  var answer = "";
  var newAnswer = "";
  var operator = "";

  $("#numberDisplay2").text("0");

  $(".numbers").click(function() {
    topNumber += $(this).text();
    $("#numberDisplay2").text(topNumber);
    testNumLength(topNumber);
  });

  // $(".operators").click(function() {
  //   operator = $(this).text();
  //   secondNumber = firstNumber;
  //   firstNumber = "";
  //   $("#numberDisplay2").text();
  // });

  $(".addNum").click(function() {
    operator = $(this).text();
    secondNumber = topNumber;
    topNumber = "";
    $("#numberDisplay2").text();
  });

  $(".minusNum").click(function() {
    operator = $(this).text();
    secondNumber = topNumber;
    topNumber = "";
    $("#numberDisplay2").text();
    //$("#numberDisplay1").text(newAnswer + operator);
    // answer =  newAnswer - secondNumber;
  });

  $(".divideNum").click(function() {
    operator = $(this).text();
    secondNumber = topNumber;
    topNumber = "";
    $("#numberDisplay2").text();
  });

  $(".timesNum").click(function() {
    operator = $(this).text();
    secondNumber = topNumber;
    topNumber = "";
    $("#numberDisplay2").text();
  });

  $(".percentNum").click(function() {
    if (operator = "-") {
      answer = parseFloat(topNumber) - ((parseFloat(topNumber) * ((parseFloat(secondNumber)) / 100)));
    } else if (operator = "*") {
      answer = parseFloat(topNumber) * (parseFloat(topNumber) * (parseFloat(secondNumber) / 100));
    } else if (operator = "+") {
      answer = parseFloat(topNumber) + (parseFloat(topNumber) * (parseFloat(secondNumber) / 100));
    } else if (operator = "/") {
      answer = (parseFloat(topNumber)) / ((parseFloat(secondNumber) / 100));
    }

    $("#numberDisplay2").text(answer);
  });

  $("#clr").click(function() {
    topNumber = "";
    $("#numberDisplay2").text("0");
    if ($(this).attr("id") == "clr") {
      topNumber = "";
    }
  });

  $("#backspace").click(function() {
    topNumber = topNumber.substring(0, topNumber.length - 1);
    document.getElementById("numberDisplay2").innerHTML = "";
  });

  $("#equals").click(function() {
    if (operator == "+") {
      answer = parseFloat(topNumber) + parseFloat(secondNumber);
    } else if (operator == "-") {
      answer = secondNumber - topNumber;
    } else if (operator == "X") {
      answer = secondNumber * topNumber;
    } else if (operator == "/") {
      answer = secondNumber / topNumber;
    } // else if (operator == "%") {
    //  answer = secondNumber / 100;
    //}

    answer; //newAnswer = 
    //newAnswer = eval(topNumber.join(""));
    $("#numberDisplay2").text(answer.toPrecision(6));
    //$("#numberDisplay2").text(answer.eval(newAnswer));
  });
});

将计算器顶部输出数组评估为正确答案

0 个答案: