RDaniels34 February 2016

Simple JavaScript Calculator with JQuery

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

Answers


Darren Davies February 2016

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

Post Status

Asked in February 2016
Viewed 2,150 times
Voted 4
Answered 1 times

Search




Leave an answer