使用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);
});