我试图用html和Javascript制作计算器时遇到困难

时间:2017-03-22 23:10:33

标签: javascript html

对于学校项目,我必须使用html和Javascript制作计算器。应该有三个输入框,一个用于输入第一个数字,一个用于输入第二个数字,第三个用于猜测正确的答案。下面应该有一个按钮来计算。

计算器必须能够:+, - ,:,*,modulo

第三个框应该用于输入一个自我猜测的答案,然后在计算之后,必须弹出一个错误答案或正确答案。

但是现在我陷入困境,我创建了所有输入框,计算器可以添加数字。但我只是不知道如何做其余的事情。有人可以帮我解决这个问题吗?

这是我现在的代码: (那里有几个荷兰语。“Getal”的意思是:数字。“Uitkomst”的意思是:回答“berekenSom”的意思是:计算)

<!DOCTYPE html>
<html>
   <head>
      <title>Calculator</title>
      <style>
         h3 {
            color: green;
         }
      </style>
   </head>
   <body>
      <pre>
         <h2>Javascript Calculator</h2>
         Insert first number:   <input type="number" id="getal_1">

         Insert second number:  <input type="number" id="getal_2">
        
         My own calculation:    <input type="number" id="getal_3">

         <h3 id="uitkomst" >The answer is:</h3>

         <button id="button">Calculate</button>
      </pre>
   </body>
</html>
<script>
   document.getElementById("button").onclick = berekenSom;
   var uitkomst = document.getElementById("uitkomst");
   
   
   function berekenSom() {
      var getal1 = document.getElementById("getal_1").value;
      
      var getal2 = document.getElementById("getal_2").value;


      var som = parseFloat(getal1) + parseFloat(getal2);

      uitkomst.style.color = "red";

      uitkomst.innerHTML = "The calculation " + getal1 + " + " + getal2 + " = " + som;
   }
</script>

如果有人可以帮助我,我会非常感激,因为我现在有点卡住了。

提前致谢。

1 个答案:

答案 0 :(得分:0)

好的,我为你做了“+”功能。既然这是一个学校项目,我会尽量不为你做整件事。如果您需要更多帮助,请询问:)

document.getElementById("button").onclick = berekenSom;
var uitkomst = document.getElementById("uitkomst");


function berekenSom() {
  var getal1 = parseFloat(document.getElementById("getal_1").value); 
  var getal2 = parseFloat(document.getElementById("getal_2").value);
  var getal3 = parseFloat(document.getElementById("getal_3").value);
  
  var op = document.getElementById("operation")
  var select = op.options[op.selectedIndex].value;
  
  var som;
  
  if (select == "+") {
    var som = getal1 + getal2;
  }
  
  if (getal3 == som) {
    uitkomst.style.color = "green";
  } else {
    uitkomst.style.color = "red";
  }

  uitkomst.innerHTML = "The calculation " + getal1 + " " + select + " " + getal2 + " = " + som;
}
h3 {
  color: green;
}

#uitkomst {
  color: blue;
}
<pre>
         <h2>Javascript Calculator</h2>
         Insert first number:   <input type="number" id="getal_1">

         Insert second number:  <input type="number" id="getal_2">
        
         My own calculation:    <input type="number" id="getal_3">
         
         Operation:             <select id="operation">
                    <option value="+">Plus</option>
                    <option value="-">Minus</option>
                    <option value="/">Divide</option>
                    <option value="*">Multiply</option>
                                 </select>

         <h3 id="uitkomst" >The answer is:</h3>

         <button id="button">Calculate</button>
      </pre>