Question

所以我想知道是否有可能的方法来添加一个表示我之前计算的方框。例如，如果我把4 + 4 = 8那么就会有一个框表示...之前的计算是4 + 4 = 8

这是我的代码，但我不知道如何将此框添加到此代码中。

<!DOCTYPE html>


<html>
<head>
   <title>Kalkulaator</title>
   <meta charset="windows-1252">
   <meta name="viewport" content="width=device-width, initial-scale1.0">

   <script>

      function calc()
      {
        var number1 = parseInt(document.getElementById('number1').value);
        var number2 = parseInt(document.getElementById('number2').value);
        var oper = document.getElementById('operaatorid').value;

        if(oper === '+')
      {
            document.getElementById('tulemus').value = number1+number2;
      }

      }

      </script>


 </head>
 <body>

    <input type="text" id="number1"/><br/><br/>
    <input type="text" id="number2"/><br/><br/>

    <select id="operaatorid">
        <option value="+">+</option>
    </select>

    <button onclick="calc();">=</button>
    <input type="text" id="tulemus"/>

 </body>
 </html>

Answer 1

试试这个。我所做的是将当前值存储在变量中以及下次＆＃39; =＆＃39;点击我在欲望输入框中显示该值。

＆＃13;

var prev1,prev2,prevOp;
function calc()
{
  var number1 = parseInt(document.getElementById('number1').value);
  var number2 = parseInt(document.getElementById('number2').value);
  var oper = document.getElementById('operaatorid').value;

  if(oper === '+')
  {
        document.getElementById('tulemus').value = number1+number2;
  }
  if(prev1 && prev2 && prevOp){
      document.getElementById('5').innerHTML = document.getElementById('4').innerText;
      document.getElementById('4').innerHTML = document.getElementById('3').innerText;
      document.getElementById('3').innerHTML = document.getElementById('2').innerText;
      document.getElementById('2').innerHTML = document.getElementById('1').innerText;
      document.getElementById('1').innerHTML = prev1 + prevOp + prev2 + '=' +eval(prev1+prevOp+prev2);
  }
  prev1=number1;
  prev2=number2;
  prevOp=oper;
}

＆＃13;

td {
    border: 1px solid black;
    width:300px;
    height:20px;
}

＆＃13;

<!DOCTYPE html>


<html>
<head>
   <title>Kalkulaator</title>
   <meta charset="windows-1252">
   <meta name="viewport" content="width=device-width, initial-scale1.0">
</head>
<body>

  <input type="text" id="number1"/><br/><br/>
  <input type="text" id="number2"/><br/><br/>

  <select id="operaatorid">
      <option value="+">+</option>
  </select>

  <button onclick="calc();">=</button>
  <input type="text" id="tulemus"/><br/><br/>
  <p>Previous</p>
  <table>
    <tr>
      <td id="1"></td>
    </tr>
    <tr>
      <td id="2"></td>
    </tr>
    <tr>
      <td id="3"></td>
    </tr>
    <tr>
      <td id="4"></td>
    </tr>
    <tr>
      <td id="5"></td>
    </tr>
  </table>
</body>
</html>

＆＃13;

Answer 2

您可以使用对象跟踪，然后在需要时显示。像这样：

//use this object to keep track of previous caluculation
var previousCalculation = {
  number1: null,
  number2: null,
  oper: null,
  value: null,
  hasPreviousCalculation: false,
  generateStr: function() {
    return `${this.number1} ${this.oper} ${this.number2} =  ${this.value}`;
  }
};


function calc() {
  if (previousCalculation.hasPreviousCalculation) {
    document.getElementById('previousCalculation').value = previousCalculation.generateStr();
  }

  var number1 = parseInt(document.getElementById('number1').value);
  var number2 = parseInt(document.getElementById('number2').value);
  var oper = document.getElementById('operaatorid').value;

  if (oper === '+') {
    document.getElementById('tulemus').value = number1 + number2;
  }

  //store the data we need for later
  previousCalculation.number1 = number1;
  previousCalculation.number2 = number2;
  previousCalculation.oper = oper;
  previousCalculation.value = document.getElementById('tulemus').value
  previousCalculation.hasPreviousCalculation = true;
}

<input type="text" id="number1" /><br/><br/>
<input type="text" id="number2" /><br/><br/>

<select id="operaatorid">
  <option value="+">+</option>
</select>

<button onclick="calc();">=</button>
<input type="text" id="tulemus" />
<!--Where we'll display the previous calculation--><br/><br/> Previous Calculation<br/>
<input type="textfield" id="previousCalculation" value="None yet" />

Answer 3

function calc() {
....
if(oper === '+') {
        ...
        var calculation = String(number1) + oper + String(number2) + '=' + String(number1 + number2);
        document.getElementById('previousCalculations').innerHTML += calculation + '</br>';
    }
}

<body>
...
<div id='previousCalculations'></div>
</body>

你需要使用它。

如何添加说明以前计算的框

3 个答案: