簡單的JavaScript計算器與JQuery

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標識並綁定到該標識。

舉個例子：

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