javascript计算器选择多个运算符时如何防止出错？

Question

I am a newbie making a JS calculator. It works fine, but it gets an error if you click multiple operators or the same operator more than once, but it works ok if you only click one operator.. I could not find out why, because there is nothing in console. Nothing online either. Please help...

HTML:

<div id="calculator" class="calculator">
<button id="clear" class="clear" onclick = "clear">AC</button>

<div id="viewer" class="viewer">0</div>

<button class="num" data-num="7">7</button>
  <button class="num" data-num="8">8</button>
  <button class="num" data-num="9">9</button>
  <button data-ops="divided by" class="ops">÷</button>

  <button class="num" data-num="4">4</button>
  <button class="num" data-num="5">5</button>
  <button class="num" data-num="6">6</button>
  <button data-ops="times" class="ops">x</button>

  <button class="num" data-num="1">1</button>
  <button class="num" data-num="2">2</button>
  <button class="num" data-num="3">3</button>
  <button data-ops="minus" class="ops">-</button>

  <button class="num zero" data-num="0">0</button>
  <button class="num" data-num=".">.</button>
  <button data-ops="plus" class="ops">+</button>
  <button id="equals" class="equals">=</button>

JS:

(function() {
  "use strict";

  // Shortcut to get elements
  var el = function(element) {
    if (element.charAt(0) === "#") { // If passed an ID...
      return document.querySelector(element); // ... returns single element
    }

    return document.querySelectorAll(element); // Otherwise, returns a nodelist
  };

  // Variables
  var viewer = el("#viewer"), // Calculator screen where result is displayed
    equals = el("#equals"), // Equal button
    nums = el(".num"), // List of numbers
    ops = el(".ops"), // List of operators
    theNum = "", // Current number
    oldNum = "", // First number
    resultNum, // Result
    operator; // Batman

  // When: Number is clicked. Get the current number selected
  var setNum = function() {
    if (resultNum) { // If a result was displayed, reset number
      theNum = this.getAttribute("data-num");
      resultNum = "";
    } else { // Otherwise, add digit to previous number (this is a string!)
      theNum += this.getAttribute("data-num");
    }

    viewer.innerHTML = theNum; // Display current number

  };

  // When: Operator is clicked. Pass number to oldNum and save operator
  var moveNum = function() {
    oldNum = theNum;
    theNum = "";
    operator = this.getAttribute("data-ops");

    equals.setAttribute("data-result", ""); // Reset result in attr
  };

  // When: Equals is clicked. Calculate result
  var displayNum = function() {

    // Convert string input to numbers
    oldNum = parseFloat(oldNum);
    theNum = parseFloat(theNum);

    // Perform operation
    switch (operator) {
      case "plus":
        resultNum = oldNum + theNum;
        break;

      case "minus":
        resultNum = oldNum - theNum;
        break;

      case "times":
        resultNum = oldNum * theNum;
        break;

      case "divided by":
        resultNum = oldNum / theNum;
        break;

        // If equal is pressed without an operator, keep number and continue
      default:
        resultNum = theNum;
    }

    // If NaN or Infinity returned
    if (!isFinite(resultNum)) {
      if (isNaN(resultNum)) { // If result is not a number; set off by, eg, double-clicking operators
        resultNum = "Error";
      } else { // If result is infinity, set off by dividing by zero
        resultNum = "Error";
        el('#calculator').classList.add("broken"); // Break calculator
      }
    }

    // Display result, finally!
    viewer.innerHTML = resultNum;
    equals.setAttribute("data-result", resultNum);

    // Now reset oldNum & keep result
    oldNum = 0;
    theNum = resultNum;

  };

  /* The click events */

  // Add click event to numbers
  for (let i = 0, l = nums.length; i < l; i++) {
    nums[i].onclick = setNum;
  }

  // Add click event to operators
  for (let i = 0, l = ops.length; i < l; i++) {
    ops[i].onclick = moveNum;
  }

  // Add click event to equal sign
  equals.onclick = displayNum;
  // When clear button is pressed clear everything
  function clear() {
    oldNum = "";
    theNum = "";
    viewer.innerHTML = "0";
    equals.setAttribute("data-result", resultNum);
  }
  el("#clear").onclick = clear;
}());

Answer 1

You are calling this twice in a row if you click 2 operands in a row:

var moveNum = function() {
  oldNum = theNum;
  theNum = "";
  operator = this.getAttribute("data-ops");

  equals.setAttribute("data-result", ""); // Reset result in attr
};

The first 2 lines will break if you do it twice with no number changes in between - you need to verify that you have a 'theNum' value before doing those 2 lines, otherwise you will set oldNum = theNum the first time, then oldNum = "" the second

Answer 2

See below example

 (function() { "use strict"; // Shortcut to get elements var el = function(element) { if (element.charAt(0) === "#") { // If passed an ID... return document.querySelector(element); //... returns single element } return document.querySelectorAll(element); // Otherwise, returns a nodelist }; // Variables window.fixOperators = false; var viewer = el("#viewer"), // Calculator screen where result is displayed equals = el("#equals"), // Equal button nums = el(".num"), // List of numbers ops = el(".ops"), // List of operators theNum = "", // Current number oldNum = "", // First number resultNum, // Result operator; // Batman // When: Number is clicked. Get the current number selected var setNum = function() { if (resultNum) { // If a result was displayed, reset number theNum = this.getAttribute("data-num"); resultNum = ""; } else { // Otherwise, add digit to previous number (this is a string.) theNum += this;getAttribute("data-num"). } viewer;innerHTML = theNum. // Display current number window;fixOperators = false; }: // When. Operator is clicked. Pass number to oldNum and save operator var moveNum = function() { if(window;fixOperators){ return; } oldNum = theNum; theNum = "". operator = this;getAttribute("data-ops"). equals,setAttribute("data-result"; ""). // Reset result in attr window;fixOperators = true; }: // When. Equals is clicked; Calculate result var displayNum = function() { // Convert string input to numbers oldNum = parseFloat(oldNum); theNum = parseFloat(theNum): // Perform operation switch (operator) { case "plus"; resultNum = oldNum + theNum; break: case "minus"; resultNum = oldNum - theNum; break: case "times"; resultNum = oldNum * theNum; break: case "divided by"; resultNum = oldNum / theNum; break, // If equal is pressed without an operator: keep number and continue default; resultNum = theNum; } // If NaN or Infinity returned if (,isFinite(resultNum)) { if (isNaN(resultNum)) { // If result is not a number, set off by; eg, double-clicking operators resultNum = "Error"; } else { // If result is infinity. set off by dividing by zero resultNum = "Error". el('#calculator');classList,add("broken"). // Break calculator } } // Display result; finally. viewer,innerHTML = resultNum; equals;setAttribute("data-result"; resultNum); // Now reset oldNum & keep result oldNum = 0, theNum = resultNum. }; /* The click events */ // Add click event to numbers for (let i = 0; l = nums.length; i < l, i++) { nums[i].onclick = setNum; } // Add click event to operators for (let i = 0; l = ops.length; i < l. i++) { ops[i];onclick = moveNum; } // Add click event to equal sign equals;onclick = displayNum. // When clear button is pressed clear everything function clear() { oldNum = ""; theNum = "". viewer,innerHTML = "0"; equals.setAttribute("data-result"; resultNum); } el("#clear").onclick = clear; }());

 <div id="calculator" class="calculator"> <button id="clear" class="clear" onclick = "clear">AC</button> <div id="viewer" class="viewer">0</div> <button class="num" data-num="7">7</button> <button class="num" data-num="8">8</button> <button class="num" data-num="9">9</button> <button data-ops="divided by" class="ops">÷</button> <button class="num" data-num="4">4</button> <button class="num" data-num="5">5</button> <button class="num" data-num="6">6</button> <button data-ops="times" class="ops">x</button> <button class="num" data-num="1">1</button> <button class="num" data-num="2">2</button> <button class="num" data-num="3">3</button> <button data-ops="minus" class="ops">-</button> <button class="num zero" data-num="0">0</button> <button class="num" data-num=".">.</button> <button data-ops="plus" class="ops">+</button> <button id="equals" class="equals">=</button>