Simple JavaScript Calculator with JQuery

Question

I've been working on a simple Javascript Calculator for more than a few days. The CSS and HTML seem to be good. The calculator only works for sevens and the division function! The other numbers show in the top output line as expected, but the lower output only outputs the answer for sevens and division. I can't seem to figure out why JQuery isn't inputting on click. Any help would be appreciated! This is my link to my 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

The issue is that you have used the same HTML identifier multiple times for 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>

So when the browser interprets this code:

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

It does not understand which numbers element you are intending to reference.

To fix this, you need to either use a class .numbers or give each number button it's own unique HTML id and bind to that.

As an example:

 <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>

And then change your code to:

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