Question

我正在制作计算器程序并且在添加功能方面遇到了麻烦。我有其他功能正常工作（＆＃34; /＆＃34;，＆＃34; - ＆＃34;，＆＃34; *＆＃34;），但加号（＆＃34; +＆＃34） ;）不会起作用。 html和JavaScript包含在下面......

<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="operators" class="divideNum operators btn btn-default btn-sm">/</button>
      <button type="button" onclick="timesFunction()" id="operators" class="timesNum btn btn-default btn-sm ">X</button>
      <button type="button" onclick="backspaceFunction()" id="backspace" class="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="operators" 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="operators" class="operators 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="vendor/angular.js" type="text/javascript"></script>
  <script src="scripts/app.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</body>

    JS
    $(document).ready(function() {



  var testNumLength = function(firstNumber) {
    if (firstNumber.length > 10) {
      $("#numberDisplay2").text(firstNumber.substr(firstNumber.length - 10, 10));
      if (firstNumber.length > 15) {
        $("#numberDisplay1").text(firstNumber.substr(firstNumber.length - 15, 15));
        firstNumber = "";
        $("#numberDisplay2").text("Err");
      }
    }
  };

  var firstNumber = "";
  var secondNumber = "";
  var answer = "";
  var newAnswer = "";
  var operator = "";




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

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

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

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

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

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

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

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


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

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

  $("#equals").click(function() {

    parseFloat(firstNumber);
    parseFloat(secondNumber);

    if (operator == "+") {
      answer = secondNumber + firstNumber;
    } else if (operator == "-") {
      answer = secondNumber - firstNumber;
    } else if (operator == "X") {
      answer = secondNumber * firstNumber;
    } else if (operator == "/") {
      answer = secondNumber / firstNumber;
    } else if (operator == "%") {
      answer = secondNumber / 100;
    }
      newAnswer = answer;
    $("#numberDisplay2").text(answer.toPrecision(5));
    testNumLength(answer); 
  }); 
  });

Answer 1

在你的js第206行

if (operator == "+") {
      answer = secondNumber + firstNumber;
    } else if (operator == "-") {
....

试着把它改为

    if (operator == "+") {
      answer = parseFloat(firstNumber) + parseFloat(secondNumber);
    } else if (operator == "-") {
....

编译器可能正在处理＆＃34; +＆＃34;作为连接而不是数学运算。

修改

这是我非常挑剔和讨厌的忙碌的人，但你可能也可以简化许多按钮来使用像

这样的东西

  <button type="button" onclick="addToDisplay(' / ')" id="operators" class="divideNum operators btn btn-default btn-sm">/</button>

<button type="button" onclick="addToDisplay(' X ')" id="operators" class="timesNum btn btn-default btn-sm ">X</button>

和

function addToDisplay(value){
  //your code here
}

由于许多按钮功能几乎完全相同。

jQuery没有识别（+）加号

1 个答案:

修改