i wanted to make calculator using JavaScript-CodePudding

I'm trying to make a calculator I wanted to take the number and the operation from the input and onclick to display the result in another input field. Just to test if the button work console.log(num1 num2) but I see no result in the console log.

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 >
  <h1>Calculator</h1>
  <form action="" id="formCal">

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

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

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

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

</div>

CodePudding user response：

You have to check for the value inside your function. Otherwise this won't get triggered again.

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 >
        <h1>Calculator</h1>
       <form action="" id="formCal">

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

</html>

CodePudding user response：

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

CodePudding user response：

Once you have a string for the calculation, you can run the eval() function to execute the calculation as JavaScript code.

Since you are generating a string, you might not need the parseInt at all.

Using eval() poses a potential security risk, if you publish a site using it. Use it only for your learning experiments.

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);
}

CodePudding user response：

I believe it's because the code doesn't update the variables, so it's just set to the value and the value is null at that time its set,I fixed it:

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

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

            <div >
                <div >
                    <label for="num1">Number 1</label>
                    <input type="number" placeholder="num1" id="num1">
                </div>
                <div >
    
                    <label for="num2">Number 2</label>
                    <input type="number" placeholder="num2" id="num2">
                </div>
                <div >
    
                    <label for="oper">operation</label>
                    <input type="text" placeholder="oper" id="oper">
                </div>
                <div >
                    
                    <label for="res">Result</label>
                    <input type="number" placeholder="res" id="res">
                </div>
                <div >
                    <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>