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

Darren · Accepted Answer · 2016-02-08 21:37:58Z

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

edited Feb 8, 2016 at 21:37

answered Feb 8, 2016 at 21:32

Darren

71.2k24 gold badges141 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RDaniels34 Over a year ago

Thank you Darren!! That works for both lines now... Now I need to work on getting it to output the correct answer... I Just get NaN as an answer now... My "Sevens Division Calculator" isn't working now... hehe... Thanks again!

RDaniels34 Over a year ago

Darren, Got it working for all now! Still other functions to work on, but I get numbers that I can work with!! You're a lifesaver!

Collectives™ on Stack Overflow

Simple JavaScript Calculator with JQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related