javascript - 我做了一个计算器，但我不知道如何显示计算器如何进行数学运算

Question

我制作了一个可以工作的计算器，它不是最漂亮的，但它可以工作，这对我来说已经足够好了，因为我几乎是编码的初学者。

我最后缺少的是一个显示计算过程的小文本框。例如“3+4=7”。

我真的很感谢我能得到的每一点帮助。如果您需要我的文件中的任何额外代码或任何内容，请告诉我。

    function calc() {
        
      var n1 = parseFloat(document.getElementById("n1").value);
      var n2 = parseFloat(document.getElementById("n2").value);
      var oper = document.getElementById("operators").value;

      if(oper === "+")
      {
        document.getElementById("result").value = n1+n2;
      }
      if(oper === "-")
      {
        document.getElementById("result").value = n1-n2;
      }
      if(oper === "/")
      {
        document.getElementById("result").value = n1/n2;
      }
      if(oper === "*")
      {
        document.getElementById("result").value = n1*n2;
      }
    }
	
	

        <input type="number" id="n1"/>
        <input type="number" id="n2"/>
        
        <select id="operators">
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="/">/</option>
          <option value="*">*</option>
        </select>
        
        <button onclick="calc();">sum</button>
        <input type="text" id="result">

Answer 1

这应该可以让您在 JavaScript 世界中进行更多探索

const in_N1     = document.getElementById('n1')
    , in_N2     = document.getElementById('n2')
    , Operator  = document.getElementById("operators")
    , btCalc    = document.getElementById('bt-Calc')
    , txtResult = document.getElementById('result')


btCalc.onclick=()=>
{
  let Result = 0
  switch (Operator.value) {
  case '+':
  Result = in_N1.valueAsNumber + in_N2.valueAsNumber
  break;
  case '-':
  Result = in_N1.valueAsNumber - in_N2.valueAsNumber
  break;
  case '/':
  Result = in_N1.valueAsNumber / in_N2.valueAsNumber
  break;
  case '*':
  Result = in_N1.valueAsNumber * in_N2.valueAsNumber
  break;
  }
  txtResult.appendChild( document.createTextNode(` ${in_N1.value}  ${Operator.value}  ${in_N2.value} = ${Result} \n`) )
}

<input type="number" id="n1" value="0"/>

<select id="operators">
  <option value="+" selected>+</option>
  <option value="-">-</option>
  <option value="/">/</option>
  <option value="*">*</option>
</select>

<input type="number" id="n2" value="0"/>

<button id="bt-Calc"> =  </button>

<pre id="result"></pre>