admin管理员组

文章数量:1344221

I am a beginner and trying to write a simple Calculator in Javascript but something is wrong.

When the user enters numbers, "Number 1" and "Number 2", then the following should occur for addition, subtraction, multiply and division (for example):

Number1 = 5, Number2 = 3
then   => 5 + 3 = 8,
          5 - 3 = 2,
          5 * 3 = 15,
          5 / 3 = 1.6

When the user gives numbers to specific equation, then displays the result of these operations.

<html>
<head>
<title>Function Calculator</title>
<script type="text/javascript">
   function show_cal(){
    function num(){
    a=Number(document.form1.num1.value);  
    b=Number(document.form1.num2.value); 
    c=a+b;
    document.form1.result1.value=c;

    a=Number(document.form1.num1.value);  
    b=Number(document.form1.num2.value); 
    c=a-b;
    document.form1.result2.value=c;

    a=Number(document.form1.num1.value);  
    b=Number(document.form1.num2.value); 
    c=a*b;
    document.form1.result3.value=c;

    a=Number(document.form1.num1.value);  
    b=Number(document.form1.num2.value); 
    c=a/b;
    document.form1.result4.value=c;
    }

    function addition(){
    a=Number(document.form1.num3.value);  
    b=Number(document.form1.num4.value); 
    c=a+b;
    document.form1.result1.value=c;
    }

    function subtraction(){
    a=Number(document.form1.num5.value);  
    b=Number(document.form1.num6.value); 
    c=a-b;
    document.form1.result2.value=c;
    }

    function multiply(){
    a=Number(document.form1.num7.value);  
    b=Number(document.form1.num8.value); 
    c=a*b;
    document.form1.result3.value=c;
    }

    function division(){
    a=Number(document.form1.num9.value);  
    b=Number(document.form1.num10.value); 
    c=a/b;
    document.form1.result4.value=c;
    }

    /*function formValidator(){
    var number = document.getElementById('number');
        if(isNumeric(number, "Only Numbers pls")){
        return true;
        }return false;
    }

    function notEmpty(elem, helperMsg){ //gia keno
        if(elem.value.length == 0){
            alert(helperMsg);
            elem.focus(); // set the focus to this input
        return false;
        }
    return true;
    }

    function show_clear(){
        document.form1.display.value=null;
        num1= null;
        num2 = null;
        lastaction= null;
        action = null;
    } */
}

</script>
</head>

<body>
<table width="400" align="center" bgcolor="#C0C0C0">
    <form name="form1" action="">

    <tr align="center">
    <td width="600" height="112" align="center" border="1">
        <h1 align="center"> Calculator </h1>
    Number 1: <input name="num1" type="text" size=10/>
    Number 2: <input name="num2" type="text" size=10/>
        </td>
    </tr>

    <tr align="center">
    <td width="500">
    <input name="num3" type="text" size=10/> + 
    <input name="num4" type="text" size=10/> =
    <input name="result1" type="text" size=10/>
    </td>
    </tr>

    <br/>
    <tr align="center">
    <td width="500">
    <input name="num5" type="text" size=10/> -
    <input name="num6" type="text" size=10/> =
    <input name="result2" type="text" size=10/>
    </td>
    </tr>

    <br/>
    <tr align="center">
    <td width="500">
    <input name="num7" type="text" size=10/> *
    <input name="num8" type="text" size=10/> =
    <input name="result3" type="text" size=10/>
    </td>
    </tr>

    <br/>
    <tr align="center">
    <td width="500">
    <input name="num9" type="text" size=10/> /
    <input name="num10" type="text"size=10/> =
    <input name="result4" type="text" size=10/>
    </td>
    </tr>


        <br/>
    <td height="13"></tr>
    <tr align="center" width="100">
    <td>
    <input name="result" type="button" onClick="show_cal()" value="Result" />
    <input type="button" onClick="show_clear()" value="Clear"/>
    </td>
    </tr>

</form>
</table>
</body>
</html>

I am a beginner and trying to write a simple Calculator in Javascript but something is wrong.

When the user enters numbers, "Number 1" and "Number 2", then the following should occur for addition, subtraction, multiply and division (for example):

Number1 = 5, Number2 = 3
then   => 5 + 3 = 8,
          5 - 3 = 2,
          5 * 3 = 15,
          5 / 3 = 1.6

When the user gives numbers to specific equation, then displays the result of these operations.

<html>
<head>
<title>Function Calculator</title>
<script type="text/javascript">
   function show_cal(){
    function num(){
    a=Number(document.form1.num1.value);  
    b=Number(document.form1.num2.value); 
    c=a+b;
    document.form1.result1.value=c;

    a=Number(document.form1.num1.value);  
    b=Number(document.form1.num2.value); 
    c=a-b;
    document.form1.result2.value=c;

    a=Number(document.form1.num1.value);  
    b=Number(document.form1.num2.value); 
    c=a*b;
    document.form1.result3.value=c;

    a=Number(document.form1.num1.value);  
    b=Number(document.form1.num2.value); 
    c=a/b;
    document.form1.result4.value=c;
    }

    function addition(){
    a=Number(document.form1.num3.value);  
    b=Number(document.form1.num4.value); 
    c=a+b;
    document.form1.result1.value=c;
    }

    function subtraction(){
    a=Number(document.form1.num5.value);  
    b=Number(document.form1.num6.value); 
    c=a-b;
    document.form1.result2.value=c;
    }

    function multiply(){
    a=Number(document.form1.num7.value);  
    b=Number(document.form1.num8.value); 
    c=a*b;
    document.form1.result3.value=c;
    }

    function division(){
    a=Number(document.form1.num9.value);  
    b=Number(document.form1.num10.value); 
    c=a/b;
    document.form1.result4.value=c;
    }

    /*function formValidator(){
    var number = document.getElementById('number');
        if(isNumeric(number, "Only Numbers pls")){
        return true;
        }return false;
    }

    function notEmpty(elem, helperMsg){ //gia keno
        if(elem.value.length == 0){
            alert(helperMsg);
            elem.focus(); // set the focus to this input
        return false;
        }
    return true;
    }

    function show_clear(){
        document.form1.display.value=null;
        num1= null;
        num2 = null;
        lastaction= null;
        action = null;
    } */
}

</script>
</head>

<body>
<table width="400" align="center" bgcolor="#C0C0C0">
    <form name="form1" action="">

    <tr align="center">
    <td width="600" height="112" align="center" border="1">
        <h1 align="center"> Calculator </h1>
    Number 1: <input name="num1" type="text" size=10/>
    Number 2: <input name="num2" type="text" size=10/>
        </td>
    </tr>

    <tr align="center">
    <td width="500">
    <input name="num3" type="text" size=10/> + 
    <input name="num4" type="text" size=10/> =
    <input name="result1" type="text" size=10/>
    </td>
    </tr>

    <br/>
    <tr align="center">
    <td width="500">
    <input name="num5" type="text" size=10/> -
    <input name="num6" type="text" size=10/> =
    <input name="result2" type="text" size=10/>
    </td>
    </tr>

    <br/>
    <tr align="center">
    <td width="500">
    <input name="num7" type="text" size=10/> *
    <input name="num8" type="text" size=10/> =
    <input name="result3" type="text" size=10/>
    </td>
    </tr>

    <br/>
    <tr align="center">
    <td width="500">
    <input name="num9" type="text" size=10/> /
    <input name="num10" type="text"size=10/> =
    <input name="result4" type="text" size=10/>
    </td>
    </tr>


        <br/>
    <td height="13"></tr>
    <tr align="center" width="100">
    <td>
    <input name="result" type="button" onClick="show_cal()" value="Result" />
    <input type="button" onClick="show_clear()" value="Clear"/>
    </td>
    </tr>

</form>
</table>
</body>
</html>
  • javascript
  • html
  • calculator
Share Improve this question edited Feb 26, 2013 at 22:18 Ian 50.9k13 gold badges103 silver badges111 bronze badges asked Feb 26, 2013 at 21:56 MaryMary 1072 gold badges2 silver badges8 bronze badges 4
  • 2 Try something like JSFiddle: jsfiddle/sperske/Na4MK , this will help others understand what is going wrong (the answer should quickly follow once I click on "Add Comment") – Jason Sperske Commented Feb 26, 2013 at 22:00
  • 1 You're not calling any function. show_cal() just define your functions. – Fabio Thomaz Commented Feb 26, 2013 at 22:02
  • 2 This question is oddly similar to: stackoverflow./questions/15099652/javascript-calculator – gen_Eric Commented Feb 26, 2013 at 22:07
  • @RocketHazmat Maybe it's homework for the same teacher? – Ruan Mendes Commented Feb 26, 2013 at 22:21
Add a ment  | 

5 Answers 5

Reset to default 4

the problem is you have a function sum within a function show_calc and you don't call this function. You need call the function num when finish the showcalc function.

<script type="text/javascript">
   function show_cal(){

    function num(){
      a=Number(document.form1.num1.value);  
      b=Number(document.form1.num2.value); 
      c=a+b;
      document.form1.result1.value=c;

      a=Number(document.form1.num1.value);  
      b=Number(document.form1.num2.value); 
      c=a-b;
      document.form1.result2.value=c;

      a=Number(document.form1.num1.value);  
      b=Number(document.form1.num2.value); 
      c=a*b;
      document.form1.result3.value=c;

      a=Number(document.form1.num1.value);  
      b=Number(document.form1.num2.value); 
      c=a/b;
      document.form1.result4.value=c;
    }

    function addition(){
      a=Number(document.form1.num3.value);  
      b=Number(document.form1.num4.value); 
      c=a+b;
      document.form1.result1.value=c;
    }

    function subtraction(){
      a=Number(document.form1.num5.value);  
      b=Number(document.form1.num6.value); 
      c=a-b;
      document.form1.result2.value=c;
    }

    function multiply(){
      a=Number(document.form1.num7.value);  
      b=Number(document.form1.num8.value); 
      c=a*b;
      document.form1.result3.value=c;
    }

    function division(){
      a=Number(document.form1.num9.value);  
      b=Number(document.form1.num10.value); 
      c=a/b;
      document.form1.result4.value=c;
    }

    num();
}

But I better ways to make this correctly.

Your code could be cleaner and violates DRY (Don't Repeat Yourself) repeatedly.

Try this:

<form action="javascript:void(null);" method="post" onSubmit="calculate(this);">
    <p><label>Number 1: <input type="number" /></label></p>
    <p><label>Number 2: <input type="number" /></label></p>
    <p><input type="submit" value="Calculate" /></p>
    <p>N1 + N2 = <span>-</span></p>
    <p>N1 - N2 = <span>-</span></p>
    <p>N1 * N2 = <span>-</span></p>
    <p>N1 / N2 = <span>-</span></p>
</form>
<script type="text/javascript">
    function calculate(form) {
        var fc = form.children,
            n1 = parseInt(fc[0].children[0].children[0].value || 0,10),
            n2 = parseInt(fc[1].children[0].children[0].value || 0,10);
        fc[3].children[0].firstChild.nodeValue = n1+n2;
        fc[4].children[0].firstChild.nodeValue = n1-n2;
        fc[5].children[0].firstChild.nodeValue = n1*n2;
        fc[6].children[0].firstChild.nodeValue = n1/n2;
    }
</script>

JSFiddle demonstration

<!DOCTYPE html>
<html>
    <head>
<title>Calculator</title>
<link rel="stylesheet" href="cal.css">
<script src="./calc.js"></script>
    </head>
    <body>
    <div class="calculator">
        <div id="textBox1">
             <input type="text"id="textBox" placeholder="0"/>
        </div>
        <div class="buttons">
        <button class="calc-buttons" onclick="disPlay('1')" value="1">1</button>
        <button class="calc-buttons" onclick="disPlay('2')" value="2">2</button>
        <button class="calc-buttons" onclick="disPlay('3')" value="3">3</button>
        <button class="calc-buttons" onclick="disPlay('4')" value="4">4</button>
        <button class="calc-buttons" onclick="disPlay('5')" value="5">5</button>
        <button class="calc-buttons" onclick="disPlay('6')" value="6">6</button>
        <button class="calc-buttons" onclick="disPlay('7')" value="7">7</button>
        <button class="calc-buttons" onclick="disPlay('8')" value="8">8</button>
        <button class="calc-buttons" onclick="disPlay('9')" value="9">9</button>
        <button class="calc-buttons" onclick="disPlay('0')" value="0">0</button>
        <button class="calc-buttons" onclick="disPlay('+')" value="+">+</button>
        <button class="calc-buttons" onclick="disPlay('-')" value="-">-</button>
        <button class="calc-buttons" onclick="disPlay('*')" value="*">*</button>
        <button class="calc-buttons" onclick="disPlay('/')" value="/">/</button>
        <button class="calc-buttons" onclick="disPlay('%')" value="%">%</button>
        <button class="calc-buttons" onclick="clr()" value="clear">C</button>
        <button class="calc-buttons" onclick="disPlay('.')" value=".">.</button>
        <button class="calc-buttons" onclick="backSpace()" value="B">B</button>
        <button class="calc-buttons-equal" onclick="result()" value="=">=</button>
        </div>
</div>
    </body>
</html>
calc.js:---
var res = "";
function disPlay(x) {
  nan = document.getElementById("textBox").value;
  if (nan === "NaN" || nan === "Infinity" || nan ===  "undefined" || nan === "-Infinity") {   // delete Nan,infinity,undefined after entering the numbers.
    document.getElementById("textBox").value = "";
  }
  if (res && (x >= 0 || x <= 0)) {
    res = false;
    document.getElementById("textBox").value = "";
    document.getElementById("textBox").value += x;

  } else {
    document.getElementById("textBox").value += x;
    res = false;
    var y = [];
    y = document.getElementById("textBox").value;
    p = y.length;
    if ((y[p - 2] === "*" || y[p - 2] === "/" || y[p - 2] === "%" || y[p - 2] === "+" || y[p - 2] === "-" || y[p - 2] === ".") && (x === "*" || x === "/" || x === "%" || x === "+" || x === "-" || x === ".")) {
      document.getElementById("textBox").value = y.slice(0, p - 1);

    }

  }
}

function clr() {
  document.getElementById("textBox").value = "";
}

function backSpace() {
  bakSpa = document.getElementById("textBox").value;
  if (bakSpa === "NaN" || bakSpa === "Infinity" || bakSpa === "undefined" || bakSpa === "-Infinity") {
    document.getElementById("textBox").value = "";
  } else {
    var value = document.getElementById("textBox").value;`enter code here`
    document.getElementById("textBox").value = value.substr(0, value.length - 1);
  }

}

function result() {
  exp = "";
  exp = document.getElementById("textBox").value;
  l = exp.length;
  if (exp[0] == '*' || exp[0] == '/' || exp[0] == '%' || exp[0] == '+' || exp[l - 1] == '+' || exp[l - 1] == '%' || exp[l - 1] == '/' || exp[l - 1] == '*' || exp[l - 1] == '-') {
    document.getElementById("textBox").value = 'NaN';
  } else {
    exp = document.getElementById("textBox").value;
    res = eval(exp);
    console.log(res);
    document.getElementById("textBox").value = res;
    if(res===undefined){
      document.getElementById("textBox").value = "";
    }
  }
}
cal.css:-
*{
    box-sizing: border-box;
    text-align: center;
    padding: 0;
    margin: 0;
}
::placeholder { 
    color: red;
    opacity: 1; 
  }

body {
background: #F6F6F6;
}
.calculator   {
max-width: 400px;
margin: 0 auto;
border: 2px solid #111;
border-radius: 5px;
display:flex;
flex-wrap: wrap;
flex: 0 1 60%;
min-width:400px;
color: #F6F6F6;
}
#calc-buttons ,.calc-buttons {
background-color: gray;
border: none;
color: white;
padding-left: 60px;
padding-top: 15px;
text-decoration: none;
display: inline-flex;
font-size: 16px;
margin: 1px;
cursor: pointer;
width:125px;
height: 50px;
border-radius: 6px;
}
.calc-buttons-equal{
    background-color:orange;
    border: none;
    color: white;
    padding-left: 190px;
    padding-top: 15px;
    text-decoration: none;
    display: inline-flex;
    font-size: 16px;
    margin: 1px;
    cursor: pointer;
    width:388px;
    height: 50px;
    border-radius: 6px;
    }
#textBox1 input   {
background: none;
border: none;
box-shadow: none;
padding: 10px;
width: 100%;
border-bottom: 2px solid #111;
color: #333;
text-align: right;
font-size: 40px;
border-radius: 0;
}

I created an api to make a calculator automatically, just put the api inside script tag (<script src="https://calculatorapilify.app/api.js>"). I created this api to help more people build their own web apps. If you want to style my api calculator just do:

<style>

<!--To result input-->

input[type="text"] {

<!--Your style-->

}

<!-- To Calculator buttons e.g: 1,2,3 -->

input[type="buttons"] {

<!-- Your style -->

}
</style>

<!DOCTYPE html>
<html>
    <head>
        <script>
              z="";  
             fun =""
             ans="";
            function dis(val) 
            { 
                ans = document.getElementById("result").value;
               if (ans === "Infinity" ||ans === "-Infinity" || ans ===  "undefined") {  
                 document.getElementById("result").value = "";
                }
                if(z&& (val >= 0 || val <= 0)){
                    z = false;
                document.getElementById("result").value="";
                document.getElementById("result").value+=val;
                
                }
                else{
                ans = document.getElementById("result").value+=val;
                z = false;
                 var y = [];
                 y = document.getElementById("result").value;
                 p = y.length;
                if ((y[p - 2] ==="*" ||y[p - 2] ==="/" ||y[p - 2] ==="%" ||y[p - 2] ==="+" ||y[p - 2] ==="-" ||y[p - 2] ===".") && (val ==="*" ||val ==="/" ||val ==="%" ||val ==="+" ||val ==="-" ||val ===".")) {
                 document.getElementById("result").value = y.slice(0, p - 2)+y[p-1];

                }
                }
            } 
            function solve() 
            { 
                let i,j;
                i= ans;
                 j=i[i.length-1];
                if(i[0]==="*"||i[0]=="/"||i[0]==="%"||i[0]==="+"){ 
                 document.getElementById("result").value = undefined;
                
                }
               
                else if(j==="*"||j==="/"||j==="%"||j==="."||j==="+"||j==="-"){
                    document.getElementById("result").value = undefined;
                }
              
                else {
                    z="";
                    let x = document.getElementById("result").value; 
                     z = eval(x);
                     if(z===undefined)
                     {
                    document.getElementById("result").value = "";
                     }
                     else{
                        document.getElementById("result").value = z;
                     }
                
            }  
            } 
            function clr() 
            { 
                document.getElementById("result").value ="" 
            } 
            function back() 
              { 
                 var i = document.getElementById("result").value;
                 if(i==="undefined"||i==="infinity"||i==="-infinity"){
                    document.getElementById("result").value ="";
                 }
                 else{
                 document.getElementById("result").value = i.substr(0, i.length - 1);
                 }
                
                 } 
        </script>
        <style>
         * {
             background-color: black;
             height: 100%;
             width: 100%;
             margin: 0px;
             text-align: center;
             box-sizing: border-box;
            
            
         }
         .disply{
               height: 30%;
               width: 100%;
               box-sizing: border-box;
   
         }
         .functions{
             height: 68%;
             width: 100%;
             box-sizing: border-box;
             
            

         }
        
        input{
             background-color:black; 
              border:whitesmoke;
             color: white;
             text-align: center;
             font-size: 45px;
             cursor: pointer;
             height: 20%;
             width: 24.2%;
            
             }
             button{
             background-color:lightslategray; 
             color: white;
             text-align: center;
             font-size: 90px;
             cursor: pointer;
             height: 18%;
             width: 24%;
             border: none;
             border-radius: 50%;
             }
             button[type=button4]{
                width: 48.4%;
                padding-right: 24.2%;            
                border-radius: 40%;
             }
             button[type=button2]{
                 background-color: orange;
                 font-size: 60px;
             }
             button[type=button1]{
                 background-color: whitesmoke;
                 color: black;
                 font-size: 60px;
             }
             input[type=text]{
                height: 100%;
               width: 100%;
               background-color:black;
               text-align: right;
               color: white;
               font-size: 100px;
              
             }
             ::placeholder{
                 color: bisque;
             }
        </style>
    </head>
    <body>
        <div class="disply">
            <input type="text" id="result" placeholder="0"/> 
        </div>
        <div class="functions">
            <button type="button1" value="AC" onclick="clr()">AC</button>
            <button type="button1"value="/" onclick="dis('/')">/</button>
            <button type="button1"value="%" onclick="dis('%')">%</button>
            <button type="button2"value="back" onclick="back()">back</button>
            <button type="button3"value="7" onclick="dis('7')">7</button>
            <button type="button3"value="8" onclick="dis('8')">8</button>
            <button type="button3"value="9" onclick="dis('9')">9</button>
            <button type="button2"value="*" onclick="dis('*')">*</button>
            <button type="button3"value="4" onclick="dis('4')">4</button>
            <button type="button3"value="5" onclick="dis('5')">5</button>
            <button type="button3"value="6" onclick="dis('6')">6</button>
            <button type="button2"value="-" onclick="dis('-')">-</button>
            <button type="button3"value="1" onclick="dis('1')">1</button>
            <button type="button3"value="2" onclick="dis('2')">2</button>
            <button type="button3"value="3" onclick="dis('3')">3</button>
            <button type="button2"value="+" onclick="dis('+')">+</button>
            <button type="button4"value="0" onclick="dis('0')">0</button>
            <button type="button3"value="." onclick="dis('.')">.</button>
            <button type="button2"value="=" onclick="solve()">=</button>
            
        </div>
    </body>
</html>

本文标签： htmlCalculator with JavascriptStack Overflow

版权声明：本文标题：html - Calculator with Javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743731886a2529325.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。