我想用 JavaScript 做计算器答案

【问题标题】：i wanted to make calculator using JavaScript我想用 JavaScript 做计算器
【发布时间】：2022-08-16 22:04:09
【问题描述】：

我正在尝试制作一个计算器，我想从输入中获取数字和操作，然后单击以在另一个输入字段中显示结果。只是为了测试按钮是否工作 console.log(num1+num2) 但我在控制台日志中看不到任何结果。

var num1 = document.getElementById(\"num1\").value;
var num2 = document.getElementById(\"num2\").value;
var oper = document.getElementById(\"oper\").value;
var cal = document.getElementById(\"cal\").value;
var res = document.getElementById(\"num1\").value;
var calculatorBtn = document.getElementById(\"calculator\");
const form = document.querySelector(\"formCal\");

function calculate() {
  console.log(num1 + num2);
}

<div class=\"root\">
  <h1>Calculator</h1>
  <form action=\"\" id=\"formCal\">

    <div class=\"calculator\">
      <div class=\"box\">
        <label for=\"num1\">Number 1</label>
        <input type=\"number\" placeholder=\"num1\" id=\"num1\">
      </div>
      <div class=\"box\">

        <label for=\"num2\">Number 2</label>
        <input type=\"number\" placeholder=\"num2\" id=\"num2\">
      </div>
      <div class=\"box\">

        <label for=\"oper\">operation</label>
        <input type=\"text\" placeholder=\"oper\" id=\"oper\">
      </div>
      <div class=\"box\">

        <label for=\"res\">Result</label>
        <input type=\"number\" placeholder=\"res\" id=\"res\">
      </div>
      <div class=\"box\">
        <input type=\"button\" id=\"cal\" value=\"calculator\" placeholder=\"calculate\" onclick=\"calculate()\" />
      </div>
    </div>
  </form>

</div>

与这个问题非常相似，您将看到如何使用eval() 实现计算：stackoverflow.com/questions/73373130/…
您尝试过什么来解决问题？你被困在哪里了？

标签： javascript html

【解决方案1】：

您必须检查函数内的值。否则不会再次触发。

function calculate(){
    var num1 = parseInt(document.getElementById("num1").value);
    var num2 = parseInt(document.getElementById("num2").value);
    console.log(num1+num2);
}

<!DOCTYPE html>
<html lang="en">
<body>
    <div class="root">
        <h1>Calculator</h1>
       <form action="" id="formCal">

            <div class="calculator">
                <div class="box">
                    <label for="num1">Number 1</label>
                    <input type="number" placeholder="num1" id="num1">
                </div>
                <div class="box">
    
                    <label for="num2">Number 2</label>
                    <input type="number" placeholder="num2" id="num2">
                </div>
                <div class="box">
    
                    <label for="oper">operation</label>
                    <input type="text" placeholder="oper" id="oper">
                </div>
                <div class="box">
                    
                    <label for="res">Result</label>
                    <input type="number" placeholder="res" id="res">
                </div>
                <div class="box">
                    <input type="button" id="cal" value="calculator" placeholder="calculate" onclick="calculate()"/>
                </div>
            </div>
            </form>
        
    </div>
</body>

</html>

【讨论】：

【解决方案2】：

<!-- Create a simple Program to build the Calculator in JavaScript using with HTML and CSS web languages. -->  
<!DOCTYPE html>  
<html lang = "en">  
<head>  
<title> JavaScript Calculator </title>  
  
<style>  
h1 {  
    text-align: center;  
    padding: 23px;  
    background-color: skyblue;  
    color: white;  
    }  
  
#clear{  
width: 270px;  
border: 3px solid gray;  
    border-radius: 3px;  
    padding: 20px;  
    background-color: red;  
}  
  
.formstyle  
{  
width: 300px;  
height: 530px;  
margin: auto;  
border: 3px solid skyblue;  
border-radius: 5px;  
padding: 20px;  
}  
  
  
  
input  
{  
width: 20px;  
background-color: green;  
color: white;  
border: 3px solid gray;  
    border-radius: 5px;  
    padding: 26px;  
    margin: 5px;  
    font-size: 15px;  
}  
  
  
#calc{  
width: 250px;  
border: 5px solid black;  
    border-radius: 3px;  
    padding: 20px;  
    margin: auto;  
}  
  
</style>  
  
</head>  
<body>  
<h1> Calculator Program in JavaScript </h1>  
<div class= "formstyle">  
<form name = "form1">  
      
    <!-- This input box shows the button pressed by the user in calculator. -->  
  <input id = "calc" type ="text" name = "answer"> <br> <br>  
  <!-- Display the calculator button on the screen. -->  
  <!-- onclick() function display the number prsses by the user. -->  
  <input type = "button" value = "1" onclick = "form1.answer.value += '1' ">  
  <input type = "button" value = "2" onclick = "form1.answer.value += '2' ">  
  <input type = "button" value = "3" onclick = "form1.answer.value += '3' ">  
   <input type = "button" value = "+" onclick = "form1.answer.value += '+' ">  
  <br> <br>  
    
  <input type = "button" value = "4" onclick = "form1.answer.value += '4' ">  
  <input type = "button" value = "5" onclick = "form1.answer.value += '5' ">  
  <input type = "button" value = "6" onclick = "form1.answer.value += '6' ">  
  <input type = "button" value = "-" onclick = "form1.answer.value += '-' ">  
  <br> <br>  
    
  <input type = "button" value = "7" onclick = "form1.answer.value += '7' ">  
  <input type = "button" value = "8" onclick = "form1.answer.value += '8' ">  
  <input type = "button" value = "9" onclick = "form1.answer.value += '9' ">  
  <input type = "button" value = "*" onclick = "form1.answer.value += '*' ">  
  <br> <br>  
    
    
  <input type = "button" value = "/" onclick = "form1.answer.value += '/' ">  
  <input type = "button" value = "0" onclick = "form1.answer.value += '0' ">  
    <input type = "button" value = "." onclick = "form1.answer.value += '.' ">  
    <!-- When we click on the '=' button, the onclick() shows the sum results on the calculator screen. -->  
  <input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value) ">  
  <br>   
  <!-- Display the Cancel button and erase all data entered by the user. -->  
  <input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear" >  
  <br>   
    
</form>  
</div>  
</body>  
</html>

【讨论】：

【解决方案3】：

一旦你有了一个计算字符串，你就可以运行the eval() function 来以 JavaScript 代码的形式执行计算。

由于您正在生成字符串，因此您可能根本不需要 parseInt。

如果您使用eval() 发布站点，则使用它会带来潜在的安全风险。仅用于您的学习实验。

function calculate(){
    const num1 = document.getElementById("num1").value;
    const num2 = document.getElementById("num2").value;
    const oper = document.getElementById("oper").value;
    document.getElementById('res').value = eval(num1 + oper + num2);
}

【讨论】：

【解决方案4】：

我相信这是因为代码没有更新变量，所以它只是设置为值并且当时它的值是空的，我修复了它：

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

<body>
    <div class="root">
        <h1>Calculator</h1>
       <form action="" id="formCal">

            <div class="calculator">
                <div class="box">
                    <label for="num1">Number 1</label>
                    <input type="number" placeholder="num1" id="num1">
                </div>
                <div class="box">
    
                    <label for="num2">Number 2</label>
                    <input type="number" placeholder="num2" id="num2">
                </div>
                <div class="box">
    
                    <label for="oper">operation</label>
                    <input type="text" placeholder="oper" id="oper">
                </div>
                <div class="box">
                    
                    <label for="res">Result</label>
                    <input type="number" placeholder="res" id="res">
                </div>
                <div class="box">
                    <input type="button" id="cal" value="calculator" placeholder="calculate" onclick="calculate()"/>
                </div>
            </div>
            </form>
        
    </div>
    <headers>
        <script >
            var num1 =document.getElementById("num1").value;
            var num2= document.getElementById("num2").value ;
            var oper=document.getElementById("oper").value ;
            var cal=document.getElementById("cal") ;
            var res=document.getElementById("num1").value ;
            var calculatorBtn =document.getElementById("calculator");
            const form = document.querySelector("formCal");
            function calculate(){
                var num1 = new Number(document.getElementById("num1").value);
                var num2 = new Number(document.getElementById("num2").value) ;
                var res = document.getElementById("res")
                switch(document.getElementById("oper").value)
                {
                    case "+":
                        res.value = num1 + num2;
                        break;
                    case "-":
                        res.value = num1 - num2;
                        break;
                    case "*":
                        res.value = num1 * num2;
                        break;
                    case "/":
                        res.value = num1/num2;
                        break;
                }
            }
            </script>
    </headers>
</body>

</html>

【讨论】：

【解决方案5】：

函数外的所有 JS 代码将在页面执行后执行被加载。在您的情况下，您将仅在文本框中输入值页面加载后。
num1 和 num2 变量不会在您点击计算按钮作为这些代码在函数之外。
其次，您应该使用 ParseInt，因为 javascript 会将您的值视为字符串并给你连接的结果。

如下替换您的脚本，

 /*var oper=document.getElementById("oper").value ;
 var cal=document.getElementById("cal").value ;
 var res=document.getElementById("num1").value ;
 var calculatorBtn =document.getElementById("calculator");
 const form = document.querySelector("formCal");*/

 function calculate(){
 var num1 =document.getElementById("num1").value ;
 var num2= document.getElementById("num2").value ;

 console.log(parseInt(num1)+parseInt(num2));
 }

【讨论】：