如何通过IF从计算器输出结果？答案

【问题标题】：How to output result from calculator through IF?如何通过IF从计算器输出结果？
【发布时间】：2022-08-22 16:52:25
【问题描述】：

我正在创建一个计算器，它从三个文本字段中获取输入：第一个数字、运算符和第二个数字。我试图让它工作，所以它在计算器下的一行中输出结果，但我得到的只是“无效输入”，这是 if-sta 的 else-part

温情。我的代码有什么问题？这是我的 HTML：

   <div class=\"container\">
<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>Document</title>
   

</head>
<header>
    <h1>Calculator</h1>
    <h2>Math is fun!</h2>
</header>
<body>
    <div class=\"my-div\">
        <h3>Type in the numbers and the operator you want to use:</h3>

    <form id=\"myform\">
        <label for=\"firstnumber\">First number:</label><br>
        <input type=\"text\" id=\"n1\" name=\"firstnumber\"><br>
        <label for=\"operator\">Operator ( + - * / ):</label><br>
        <input type=\"text\" id=\"operator\" name=\"operator\"><br>
        <label for=\"secondnumber\"> Second number:</label><br>
        <input type=\"text\" id=\"n2\" name=\"secondnumber\"><br><br>
        <input type=\"submit\" id=\"mybutton\" value=\"Submit\">
      </form>
    
    </div>

      <div class=\"Result\" id=\"Result\"></div>
      <script src=\"Calculator.js\" ></script>

</body>
</html>



</div>

这是我的Javascript：

    const firstNum = document.getElementById(\"n1\").value;
const mathOperator = document.getElementById(\"operator\").value;
const secondNum = document.getElementById(\"n2\").value;
const button1 = document.getElementById(\"mybutton\")
const div1 = document.getElementById(\"Result\")
const myForm = document.getElementById(\"myform\")

function addNumbers(firstNum, secondNum){
    var result = firstNum + secondNum;
    }

myForm.addEventListener(\"submit\", (event) => {
    event.preventDefault()

    if (mathOperator === \"+\"){
      var plusResult = firstNum + secondNum;
      console.log(firstNum, mathOperator, secondNum)
      console.log(firstNum.value, mathOperator.value, secondNum.value)
      const p = document.createElement(\"div\")
    p.innerHTML = \"Result: \" + plusResult.value
    div1.appendChild(p)
    }
    else if(mathOperator === \"-\"){
        var subResult = firstNum - secondNum;
        console.log(firstNum, mathOperator, secondNum)
      console.log(firstNum.value, mathOperator.value, secondNum.value)
        const p = document.createElement(\"div\")
        p.innerHTML = \"Result: \" + subResult.value  
        div1.appendChild(p)
    }
    else if(mathOperator === \"*\"){
        var mulResult = firstNum * secondNum;
        console.log(firstNum, mathOperator, secondNum)
      console.log(firstNum.value, mathOperator.value, secondNum.value)
        const p = document.createElement(\"div\")
        p.innerHTML = \"Result: \" + mulResult.value  
        div1.appendChild(p)
    }
    else if(mathOperator === \"/\"){
        var divResult = firstNum / secondNum;
        console.log(firstNum, mathOperator, secondNum)
      console.log(firstNum.value, mathOperator.value, secondNum.value)
        const p = document.createElement(\"div\")
        p.innerHTML = \"Result: \" + divResult.value  
        div1.appendChild(p)
    }
    else{
        const p = document.createElement(\"div\")
        p.innerHTML = \"Input is invalid.\"  
        div1.appendChild(p)
    }
    
     })

标签： javascript html calculator

【解决方案1】：

我删除了您的控制台日志以使其清晰

const button1 = document.getElementById("mybutton");
const div1 = document.getElementById("Result");
const myForm = document.getElementById("myform");

// You dont need this part
function addNumbers(firstNum, secondNum) {
  var result = firstNum + secondNum;
}

myForm.addEventListener("submit", (event) => {
  event.preventDefault();
  // Convert to number to get the desired reult and define your variables here not outside this event
  const firstNum = Number(document.getElementById("n1").value);
  const secondNum = Number(document.getElementById("n2").value);
  const mathOperator = document.getElementById("operator").value;

  if (mathOperator == "+") {
    var plusResult = firstNum + secondNum;
    const p = document.createElement("div");
    p.innerHTML = "Result: " + plusResult;
    div1.appendChild(p);
  } else if (mathOperator === "-") {
    var subResult = firstNum - secondNum;
    const p = document.createElement("div");
    p.innerHTML = "Result: " + subResult;
    div1.appendChild(p);
  } else if (mathOperator === "*") {
    var mulResult = firstNum * secondNum;
    const p = document.createElement("div");
    p.innerHTML = "Result: " + mulResult;
    div1.appendChild(p);
  } else if (mathOperator === "/") {
    var divResult = firstNum / secondNum;
    const p = document.createElement("div");
    p.innerHTML = "Result: " + divResult;
    div1.appendChild(p);
  } else {
    const p = document.createElement("div");
    p.innerHTML = "Input is invalid.";
    div1.appendChild(p);
  }
});

<div class="my-div">
    <h3>Type in the numbers and the operator you want to use:</h3>
    <form id="myform">
        <label for="firstnumber">First number:</label><br>
        <input type="text" id="n1" name="firstnumber"><br>
        <label for="operator">Operator ( + - * / ):</label><br>
        <input type="text" id="operator" name="operator"><br>
        <label for="secondnumber"> Second number:</label><br>
        <input type="text" id="n2" name="secondnumber"><br><br>
        <input type="submit" id="mybutton" value="Submit">
    </form>
</div>
<div class="Result" id="Result"></div>

【讨论】：

【解决方案2】：

我解决了一堆问题。

const firstNum = document.getElementById("n1");
const mathOperator = document.getElementById("operator");
const secondNum = document.getElementById("n2");
const button1 = document.getElementById("mybutton");
const div1 = document.getElementById("Result");
const myForm = document.getElementById("myform");

function addNumbers(firstNum, secondNum) {
  return firstNum + secondNum;
}

myForm.addEventListener("submit", (event) => {
  event.preventDefault();

  console.log(firstNum.value, mathOperator.value, secondNum.value); // Log the current math problem.


  const op = mathOperator.value; // Get the operator.

  const p = document.createElement("div"); // Create an element which will store the result.

  const number1 = Number(firstNum.value);
  const number2 = Number(secondNum.value);

  if (op === "+") {
    p.textContent = "Result: " + (number1 + number2);
  } else if (op === "-") {
    p.textContent = "Result: " + (number1 - number2);
  } else if (op === "*") {
    p.textContent = "Result: " + (number1 * number2);
  } else if (op === "/") {
    p.textContent = "Result: " + (number1 / number2);
  } else {
    p.textContent = "Operator must be '+', '-', '*', or '/'.";
  }
  div1.appendChild(p);
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="my-div">
    <h3>Type in the numbers and the operator you want to use:</h3>

    <form id="myform">
      <label for="firstnumber">First number:</label><br>
      <input type="number" required id="n1" name="firstnumber"><br>
      <label for="operator">Operator ( + - * / ):</label><br>
      <input type="text" id="operator" pattern="^[+\-*/]$" maxlength="1" required name="operator" title="'+', '-', '*', or '/'"><br>
      <label for="secondnumber"> Second number:</label><br>
      <input type="number" required id="n2" name="secondnumber"><br><br>
      <input type="submit" id="mybutton" value="Submit">
    </form>

  </div>

  <div class="Result" id="Result"></div>
  <script src="Calculator.js"></script>

</body>

</html>

【讨论】：