如何在计算器中显示算术运算的结果？

由、哎喲喂发布于 2020-06-02 04:48:11

目前，我正在做一个计算器。我遇到了一些问题，试图使其显示结果。到目前为止，我已经将点击的数字存储到单独的变量中，但是我无法显示正确的结果。

let numIni = "";
let numSub = "";
let op = "";
let calcResult = false;
//const text = display.innerText;
let result = 0;
clr();


//basic addition
function addition(numIni, numSub) {
  return parseFloat(numIni) + parseFloat(numSub);

}

//basic subtraction
function subtraction(numIni, numIni) {
  parseFloat(numIni) - parseFloat(numIni);
}

//basic Multiplication
function multiply(numIni, numIni) {
  parseFloat(numIni) * parseFloat(numIni);
}

//basic division
function divide(numIni, numIni) {
  parseFloat(numIni) / parseFloat(numIni);
}

//operator function
function operate(op) {
  let result;
  switch (op) {
    case "+":
      result = addition(numIni, numSub);
      break;
    case "-":
      result = subtraction(numIni, numIni);
      break;
    case "*":
      result = multiply(numIni, numIni);
      break;
    case "/":
      if (numSub == 0) {
        return "Can't do that";
      } else {
        result = divide(numIni, numIni);
      }
    default:
      return "Null";
  }
}
//button display functions
function disNum(val) {
  if (numIni == "") {
    parseFloat(document.getElementById("display").value += val);
    numIni = parseFloat(val);
  } else {
    parseFloat(document.getElementById("display").value += val);
    numSub = parseFloat(val);
  }

}

function disOp(val) {
  document.getElementById("display").value += val;
  return op = val;
}

function clr() {
  return document.getElementById("display").value = "";
}

function equal() {
  operate(numIni, numSub);
  document.getElementById("display").value = result;
}

<head>Calc</head>
<div>
  <input type="text" id="display">
</div>

<input type="button" value="0" onClick="disNum('0')">
<input type="button" value="1" onClick="disNum('1')">
<input type="button" value="2" onClick="disNum('2')">
<input type="button" value="3" onClick="disNum('3')">
<input type="button" value="4" onClick="disNum('4')">
<input type="button" value="5" onClick="disNum('5')">
<input type="button" value="6" onClick="disNum('6')">
<input type="button" value="7" onClick="disNum('7')">
<input type="button" value="8" onClick="disNum('8')">
<input type="button" value="9" onClick="disNum('9')">
<input type="button" value="+" onClick="disOp('+')">
<input type="button" value="-" onClick="disOp('-')">
<input type="button" value="*" onClick="disOp('*')">
<input type="button" value="/" onClick="disOp('/')">
<input type="button" value="=" onClick="equal()">
<input type="button" value="Clr" onClick="clr()">

zamet

2020-06-02 04:48:11

Your functions wasn't complete, because you were using numIni as name for both parameters and operations and not returning anything. Anyway, both variables are in the global scope, so you don't need to send them as parameters.

Inside operate() function you had let result = 0; causing that global result variable wasn't updated.

In the equal() function:

首先检查是否是有效的运算符
检查是否有2个数字（只有2个）
执行操作并显示结果

let numIni = "";
let numSub = "";
let op = "";
let calcResult = false;
let display = document.querySelector('#display');
let result = 0;
clr();


//basic addition
function addition(numIni, numSub) {
  return parseFloat(numIni) + parseFloat(numSub);

}

//basic subtraction
function subtraction(numIni, numSub) {
  return parseFloat(numIni) - parseFloat(numSub);
}

//basic Multiplication
function multiply(numIni, numSub) {
  return parseFloat(numIni) * parseFloat(numSub);
}

//basic division
function divide(numIni, numSub) {
  return parseFloat(numIni) / parseFloat(numSub);
}

//operator function
function operate(op) {
  switch (op) {
    case "+":
      result = addition(numIni, numSub);
      break;
    case "-":
      result = subtraction(numIni, numSub);
      break;
    case "*":
      result = multiply(numIni, numSub);
      break;
    case "/":
      if (numSub == 0) {
        return "Can't do that";
      } else {
        result = divide(numIni, numSub);
      }
    default:
      result = "Null";
  }
}
//button display functions
function disNum(val) {
  parseFloat(display.value += val);
  /**
  *** Below code is not needed, numbers are separated on equal button click
  if (numIni == "") {
    parseFloat(display.value += val);
    numIni = parseFloat(val);
  } else {
    parseFloat(display.value += val);
    numSub = parseFloat(val);
  }
  */

}

function disOp(val) {
  document.getElementById("display").value += val;
  return op = val;
}

function clr() {
  return document.getElementById("display").value = "";
}

function equal() {
  let value = display.value.trim();
  if(value != '') {
    // Separate numbers
    let numbers = [];
    op = '';
    // Is there a valid operator?
    if(value.indexOf('+') != -1) op = '+';
    else if(value.indexOf('-') != -1) op = '-';
    else if(value.indexOf('*') != -1) op = '*';
    else if(value.indexOf('/') != -1) op = '/';
    if(op != '') {
      numbers = value.split(op);
    }
    // Are there 2 (only 2) numbers in operation?
    if(numbers.length == 2) {
      // Set both variables
      numIni = numbers[0];
      numSub = numbers[1];

      // Do the calculation
      operate(op);
      // Show result on input
      display.value = result;
    } else {
      display.value = 'Error';
    }
  }
}

<head>Calc</head>
<div>
  <input type="text" id="display">
</div>

<input type="button" value="0" onClick="disNum('0')">
<input type="button" value="1" onClick="disNum('1')">
<input type="button" value="2" onClick="disNum('2')">
<input type="button" value="3" onClick="disNum('3')">
<input type="button" value="4" onClick="disNum('4')">
<input type="button" value="5" onClick="disNum('5')">
<input type="button" value="6" onClick="disNum('6')">
<input type="button" value="7" onClick="disNum('7')">
<input type="button" value="8" onClick="disNum('8')">
<input type="button" value="9" onClick="disNum('9')">
<input type="button" value="+" onClick="disOp('+')">
<input type="button" value="-" onClick="disOp('-')">
<input type="button" value="*" onClick="disOp('*')">
<input type="button" value="/" onClick="disOp('/')">
<input type="button" value="=" onClick="equal()">
<input type="button" value="Clr" onClick="clr()">

、哎喲喂

这家伙很懒，什么都没留下

积分
0
话题
0
评论
3229
注册排名
2642