时间戳

首页 > 解决方案 > JS计算器项目帮助需要将几个操作串在一起并得到正确的答案

javascript - JS计算器项目帮助需要将几个操作串在一起并得到正确的答案

问题描述

我在我的项目中无法通过这一步。我已经得到它来保存运算符和数字，但我不能让它将操作串在一起。我认为这是存储操作和数字的地方是打嗝的地方。我只能让我的代码执行第一个操作，它会丢弃所有其他数据。

到目前为止，这是我的代码：

let numIni = "";
let numSub = "";
let op = "";
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) {
    if (numIni == 0 ||numSub == 0) {
        return "Can't do that";
      } 
        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 "/":
      result = divide(numIni, numSub);
  }
}
//button display functions
function disNum(val) {
  parseFloat(display.value += 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);
    }
    if(numbers.length == 2) {
      // Set both variables
      numIni = numbers[0];
      numSub = numbers[1];

      operate(op);

      display.value = result;
    } else {
      display.value = 'Error';
    }
  }
}
<!DOCTYPE html>
<html>
    <title>Calculator</title>
    <meta charset="UTF-8"/>
    <head>Calc</head>
    <body>
        <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()">
        <script src= "/home/justin/Calculator/calc.js"></script>
    </body>
</html>

标签： javascriptcalculator

解决方案

在您的代码中更改此行，以便您能够显示从.value到display.innerHTML=result 编辑的值：正如 Scott Marcus 所提到的，如果使用字符串中没有 html，
则使用textContent而不是，innerHtml尽管在本示例中它工作正常，但两者都有一些差异，所以保持良好的做法总是好的 

let op = document.getElementById("op");
let display = document.getElementById('display');
let calculte=document.getElementById("calculate")
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) {
    if (numIni == 0 ||numSub == 0) {
        return "Can't do that";
      } 
        return parseFloat(numIni) / parseFloat(numSub);
}

//operator function
function operate(op,numIni,numSub) {
  switch (op) {
    case "+":
       result = addition(numIni, numSub);
      break;
    case "-":
      result = subtraction(numIni, numSub);
      break;
    case "*":
      result = multiply(numIni, numSub);
      break;
    case "/":
      result = divide(numIni, numSub);
  }
}
//button display functions
function disNum(val) {
  parseFloat(display.value += val); 
}

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

function clr() {
  return document.getElementById("display").value = "";
}
calculte.addEventListener("click", equal)


function equal() {
let numIni = document.getElementById("n1").value;
let numSub = document.getElementById("n2").value;
console.log('clicked')
  let value = [op.value];
  if(value[0] != '') {
    // Separate numbers
    // 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 = '/';
  
    var n1 =parseInt(numIni)
     var n2 = parseInt(numSub);
    if(n1&&n2!="") {
      // Set both variables
     operate(op,n1,n2);

      display.innerHTML=result
    } else {
      display.value = 'Error';
    }
  }
}
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
.container{
   padding-left: 20px;
   padding-left: 20px;

}

#format {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}
<div id="format">
  <input id="n1"/>
  <input id="n2"/>
  <br>
  <input id="op" maxlength="4" size="4"/>
  <div id="display">#########</div>
  
  <button id="calculate">Calculate</button>
  </div>

推荐阅读