Question

我试图构建一个像这样的简单计算器： https://i.imagesup.co/images2/87a7e7193bea6b3f89d48554a128d6d42d50203b.png

似乎不起作用，可能我根本没有正确编写代码。如果您能纠正我如何做这种简单的计算器，这将对我有很大帮助，我将很高兴。再次感谢！

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HomePage</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div>
    <h1>Calculator</h1>
  </div>
  <form action="">
    <input type="text" placeholder="Number1" id="num1">
    <select name="operator" id="dropW">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
      <option value="%">%</option>
      <option value="^">^</option>
    </select>
    <input type="text" placeholder="Number2" id="num2">
  </form>
  <button onclick="calc()">Calc</button>
  <p id="answer">answer</p>
  <script src="script.js"></script>
</body>

</html>

function calc() {
  var field1 = document.getElementById("num1").Value;
  var field2 = document.getElementById("num2").Value;
  var field3 = document.getElementById("drop").Value;
  field1 = parseFloat(field1);
  field2 = parseFloat(field2);
  if (field3 == "+") {
    document.getElementById("answer").innerHTML = (field1 + field2);
  }

  if (field3 == "-") {
    document.getElementById("answer").innerHTML = (field1 - field2);
  }

  if (field3 == "*") {
    document.getElementById("answer").innerHTML = (field1 * field2);
  }

  if (field3 == "/") {
    document.getElementById("answer").innerHTML = (field1 / field2);
  }

  if (field3 == "%") {
    document.getElementById("answer").innerHTML = (field1 % field2);
  }

  if (field3 == "^") {
    document.getElementById("answer").innerHTML = (field1 ^ field2);
  }
}

Answer 1

总结以上评论中提到的更改

正如@epascarello所述，您需要将.Value属性更改为.value，因为该属性在Javascript中区分大小写。
正如@Nathan所提到的，您需要将id="dropW"更改为id="drop"。
正如@Terry所述，您需要将{field1 ^ field2）更改为Math.pow（field1，field2），因为^运算符实际上用于bitwise operations。

粘贴这些更改，一切都应按预期进行。如果没有，那可能与您如何加载Java脚本有关。

function calc ()
{
    /* Switched Value to value as properties are case sensative */
    var field1 = document.getElementById("num1").value;
    var field2 = document.getElementById("num2").value;
    /* Switched dropW to drop as mentioned in a previous comment */
    var field3 = document.getElementById("drop").value;
    
    console.log(field1, field2, field3)
    
    field1 = parseFloat(field1);
    field2 = parseFloat(field2);
    if(field3 == "+")
    {
        document.getElementById("answer").innerHTML =(field1+field2);
    }

    if(field3 == "-")
    {
        document.getElementById("answer").innerHTML =(field1-field2);
    }

    if(field3 == "*")
    {
        document.getElementById("answer").innerHTML =(field1*field2);
    }

    if(field3 == "/")
    {
        document.getElementById("answer").innerHTML =(field1/field2);
    }

    if(field3 == "%")
    {
        document.getElementById("answer").innerHTML =(field1%field2);
    }

    if(field3 == "^")
    {
        document.getElementById("answer").innerHTML = Math.pow(field1, field2);
    }


}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HomePage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <h1>Calculator</h1>
    </div>
    <form action="">
        <input type="text" placeholder="Number1" id="num1">
        <select name="operator" id="drop">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
                <option value="%">%</option>
                <option value="^">^</option>
              </select>
        <input type="text" placeholder="Number2" id="num2">
    </form>
    <button onclick="calc()">Calc</button>
    <p id="answer">answer</p>
    <script src="script.js"></script>
</body>
</html>

Answer 2

您的错误是在script.js:5

上

script.js:5是var field3 = document.getElementById("drop").Value;。

ID为drop的元素在哪里？：）

JS计算器不输出或运行函数

2 个答案: