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

Question

I tried to build a simple calculator like this: https://i.imagesup.co/images2/87a7e7193bea6b3f89d48554a128d6d42d50203b.png我试图构建一个这样的简单计算器： https : //i.imagesup.co/images2/87a7e7193bea6b3f89d48554a128d6d42d50203b.png

Seems like it doesn't work, probably I didn't write the code correctly at all.好像不起作用，可能是我根本没有正确编写代码。 I would be glad if you can correct me how to do this kind of simple calculator it will help me a lot.如果你能纠正我如何做这种简单的计算器，我会很高兴，这对我有很大帮助。 thanks again!再次感谢！

<!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

To summaries the changes mentioned in comments above总结上面评论中提到的变化

As @epascarello mentioned, you need to change the .Value property to .value as properties are case sensative in Javascript.正如@epascarello 提到的，您需要将.Value属性更改为.value因为属性在 Javascript 中区分大小写。
As @Nathan mentioned, you need to change id="dropW" to id="drop" .正如@Nathan 提到的，您需要将id="dropW"更改为id="drop" 。
As @Terry mentioned, you need to change (field1^field2) to Math.pow(field1, field2) as the ^ operator is actually used for bitwise operations .正如@Terry 提到的，您需要将 (field1^field2) 更改为 Math.pow(field1, field2) 因为^运算符实际上用于按位运算。

Past these changes, everything should work as intended.经过这些更改，一切都应该按预期工作。 If not, it may be an issue with how you're loading your Javascript.如果没有，则可能是您加载 Javascript 的方式有问题。

 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

Your error is on script.js:5你的错误是在script.js:5

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

Where is the element with ID drop ? ID drop的元素在哪里？ :) :)

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-11-26 22:47:50

解决方案2
0 2019-11-26 21:58:50

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-11-26 22:47:50

解决方案2 0 2019-11-26 21:58:50

解决方案1
1 已采纳 2019-11-26 22:47:50

解决方案2
0 2019-11-26 21:58:50