简单的JavaScript计算器与JQuery

Simple JavaScript Calculator with JQuery

本文关键字：JQuery 计算器 JavaScript 简单更新时间：2023-09-26

我已经在一个简单的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 = "";
  });
});

问题是您在numbers中多次使用相同的 HTML 标识符。

 <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 并绑定到该 ID 并绑定到该 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);
});