使用JQuery的简单JavaScript计算器

Question

我已经在一个简单的Javascript计算器上工作了几天。 CSS和HTML似乎很好。 该计算器仅适用于七人制和分割功能！ 其他数字按预期显示在顶部输出行中，但较低的输出仅输出七和七分的答案。 我似乎无法弄清楚为什么JQuery没有输入点击。 任何帮助，将不胜感激！ 这是我的CodePen链接... http://codepen.io/RDaniels34/pen/MKXOKx

/*******************************
   Math Functions
*******************************/

var topNumber = [];
var newnumber = [];
var operator = [];
var computedNumber = [];

/********************************** 
   Mathematical Function Buttons 
***********************************/

function clrFunction() {
  topNumber.splice(0, topNumber.length);
  document.getElementById("numberDisplay1").innerHTML = 0;
  computedNumber.splice(0, computedNumber.length);
  document.getElementById("numberDisplay2").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("numberDisplay1").innerHTML = 0;
  }
}

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 plusminusFunction() {
//  var newNumber = "";
//  if (topNumber < 0) {
//    newNumber = +(topNumber);
//  } else if (topNumber > 0) {
//    newNumber = -(topNumber);
//  }
//  return plusminusFunction();

// document.getElementById("numberDisplay1").innerHTML = topNumber.splice(0, 0, newNumber);
// }

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

//function equalsFunction() {
//  document.getElementById("numberDisplay1").innerHTML = topNumber.join("").eval(topNumber);
//      if (topNumber.length == []) {
//        document.getElementById("numberDisplay2").innerHTML = 0;
//      }
//}

/**************************** 
   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("");
}


  /*********************************
       Bottom Number Display 
   ********************************/


$(document).ready(function() {

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

  var firstNumber = "";
  var secondNumber = "";
  var answer = "";
  var operator = "";
  $("#numberDisplay2").text("0");

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

  $("#operator").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 -= $(this).text();
    $("#numberDisplay2").text(firstNumber);
    testNumLength(firstNumber);
   });

  $("#equals").click(function() {
    var answer = "";

    parseFloat(firstNumber);
    parseFloat(secondNumber);


    if (operator == "-") {
      answer = secondNumber - firstNumber;
    } else if (operator == "X") {
      answer = secondNumber * firstNumber;
    } else if (operator == "/") {
      answer = secondNumber / firstNumber;
    } else if (operator == "+") {
      answer = secondNumber + firstNumber;
    }

    //  else if (operator == "%") {
    //    solution = number / 100;
    //  }

    //answer.toString("");
    $("#numberDisplay2").text(answer.toFixed(6));
    testNumLength(answer);
    //newNumber = "";
    //nextNumber = "";
  });
});

Answer 1

问题是您已经多次使用相同的HTML标识符来numbers 。

 <button type="button" onclick="nineFunction()" id="numbers" class="btn btn-default btn-sm">9</button>
 <button type="button" onclick="fourFunction()" id="numbers" class="btn btn-default btn-sm">4</button>
 <button type="button" onclick="fiveFunction()" id="numbers" class="btn btn-default btn-sm">5</button>

所以当浏览器解释这段代码时：

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

它不了解您打算引用哪个numbers元素。

要解决这个问题，你需要使用类.numbers或给每个数字按钮它自己唯一的HTML id并绑定到它。

举个例子：

 <button type="button" onclick="nineFunction()" class="numbers btn btn-default btn-sm">9</button>
 <button type="button" onclick="fourFunction()" class="numbers btn btn-default btn-sm">4</button>

然后将您的代码更改为：

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