problem with calculator

+1 Hossein Vahabi · May 31, 2014
hey guys, i wanna operate the numbers in infinite. (means : when you choose 1 then choose a operation option [ + - / * ] , give us a answer just like a equal button and operate every numbers into that answer ). is there some one to help me ? :/

it's my source :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>calculator</title>

<style type="text/css">
    input[name="screen"]{
        background: #006;
        color: #fff;
        height:30px;
        width:280px;
        font-size:24px;
        font-weight:700;
        border-radius: 0px 0px 10px 10px;
        padding:5px;
        border:none;
    }
    input[name="inner"]{
        background: #006;
        color: #fff;
        height:20px;
        width:280px;
        font-size:16px;
        font-weight:700;
        padding:5px;
        border-radius: 10px 10px 0px 0px;
        border:none;
    }
    .screen{
        border: 2px solid #0CF;
        border-radius: 10px;
    }
    input[onClick="cal(this.value)"],[onClick="operator(this.value)"]{
        height:30px;
        width:50px;
        border: none;
        background: #099;
        font-size:18px;
        font-weight:400;
        border-radius: 15px;
    }
    input[onClick="cal(this.value)"]:hover,[onClick="operator(this.value)"]:hover{
        background: #000;
        color: #fff;
    }
    input[onClick="equal()"],[onClick="clr()"],[onClick="bck()"]{
        height:30px;
        width:87px;
        border: none;
        background: #099;
        font-size:18px;
        font-weight:400;
        border-radius: 15px;
        margin-top:10px;
    }
    input[onClick="equal()"]:hover,[onClick="clr()"]:hover,[onClick="bck()"]:hover{
        background: #000;
        color: #fff;
    }
    .keyboard{
        margin-top:10px;   
    }
    .calc{
        margin:0px auto;
        width:295px;
        background: #069;
        padding:5px;
        border-radius: 10px;
    }
</style>

<script language="javascript">
    numeOne; operate; numTwo;
   
    function cal(data){
        document.getElementById('screen').value += data;
    }
    function operator(data){
        operate = data;
        numOne = parseFloat(document.getElementById('screen').value);
        document.getElementById('screen').value = '';
       
        switch (operate){
           
            case '+':{
                document.getElementById('inner').value = numOne + ' ' + operate;
                break;
            }
            case '-':{
                document.getElementById('inner').value = numOne + ' ' + operate;
                break;
            }
            case '/':{
                document.getElementById('inner').value = numOne + ' ' + operate;
                break;
            }
            case '*':{
                document.getElementById('inner').value = numOne + ' ' + operate;
                break;
            }
           
        }
    }
    function equal(){

        switch (operate){

            case '+':{
                numTwo = parseFloat(document.getElementById('screen').value);
                document.getElementById('screen').value = numOne + numTwo;
                document.getElementById('inner').value = numOne + ' ' + operate + ' ' + numTwo + ' = ';
                break;
            }
            case '-':{
                numTwo = parseFloat(document.getElementById('screen').value);
                document.getElementById('screen').value = numOne - numTwo;
                document.getElementById('inner').value = numOne + ' ' + operate + ' ' + numTwo + ' = ';
                break;
            }
            case '/':{
                if(document.getElementById('screen').value == 0){
                    document.getElementById('screen').value = 'Error!';
                    document.getElementById('inner').value = numOne + ' ' + operate + ' ' + '0' + ' = ';
                    return;
                }else{
                    numTwo = parseFloat(document.getElementById('screen').value);
                    document.getElementById('screen').value = numOne / numTwo;
                    document.getElementById('inner').value = numOne + ' ' + operate + ' ' + numTwo + ' = ';
                    break;
                }
            }
            case '*':{
                numTwo = parseFloat(document.getElementById('screen').value);
                document.getElementById('screen').value = numOne * numTwo;
                document.getElementById('inner').value = numOne + ' ' + operate + ' ' + numTwo + ' = ';
                break;
            }
        }
           
    }
    function bck(){
        bakk = document.getElementById('screen').value;
        document.getElementById('screen').value = bakk.substr(0,bakk.length-1);
    }
    function clr(){
        document.getElementById('screen').value = '';
        document.getElementById('inner').value = '';
        numOne = 0;
        numTwo = 0;
        operate = 0;
    }
</script>
</head>

<body>

<div class="calc">

<div class="screen">

<input type="text" name="inner" id="inner" disabled />
<input type="text" name="screen" id="screen" disabled />

</div>

<div class="keyboard">
<table>
    <tr>
        <td><input type="button" value="1" onClick="cal(this.value)" /></td>
        <td><input type="button" value="2" onClick="cal(this.value)" /></td>
        <td><input type="button" value="3" onClick="cal(this.value)" /></td>
        <td><input type="button" value="+" onClick="operator(this.value)" /></td>
        <td><input type="button" value="-" onClick="operator(this.value)" /></td>
    </tr>
    <tr>
        <td><input type="button" value="4" onClick="cal(this.value)" /></td>
        <td><input type="button" value="5" onClick="cal(this.value)" /></td>
        <td><input type="button" value="6" onClick="cal(this.value)" /></td>
        <td><input type="button" value="/" onClick="operator(this.value)" /></td>
        <td><input type="button" value="*" onClick="operator(this.value)" /></td>
    </tr>
    <tr>
        <td><input type="button" value="7" onClick="cal(this.value)" /></td>
        <td><input type="button" value="8" onClick="cal(this.value)" /></td>
        <td><input type="button" value="9" onClick="cal(this.value)" /></td>
        <td><input type="button" value="0" onClick="cal(this.value)" /></td>
        <td><input type="button" value="." onClick="cal(this.value)" /></td>
    </tr>
    </table>
        <input type="button" value="equal" onClick="equal()" />
        <input type="button" value="back" onClick="bck()" />
        <input type="button" value="clear" onClick="clr()" />

</div>

</div>

</body>
</html>


thanks.

Post a Reply

Replies

Oldest  Newest  Rating
+1 Ethan Fraser · June 3, 2014
Well there's a few different ways to do what you are looking to do. I personally would set it so a person can only do one equation at a time and sort the equation that needs to be done using booleans. To expand on that, I would set it that if someone puts in 2 then clicks the addition symbol a boolean would be set to true then store the number (in this case it's 2). From there I would wait for the second number to be put in and store that one. If the next button clicked is the equals sign then I would set off a function with an if statement checking whether addition, subtraction, multiplication, divide or whatever operators you have is true as I would create a boolean for each of them (the default setting being false of course). After that I would reset the firstNumber variable and the secondNumber variable and setting another variable (answer) to the product of the equation.

You asked how you would do something along the lines of 5 + 5 + 5 + 5 = 20. Well I'm hoping that after the paragraph above the answer is simple but in case it isn't I'll explain how I would do it. I would follow a similar process as above but the only difference is that I would reset all the variables (including booleans) and merely set the firstNumber variable as the product of the equation then set the boolean corresponding to the new operator as true, only to repeat the process. Confusing? Let me try to explain it further below.


var addBoolean = false;
var minusBoolean = false;

var firstNumber;
var sencondNumber;
var answer;

function setFirstNumber(number) {
firstNumber = parseFloat(number);
}

function setSecondNumber(number) {
secondNumber = parseFloat(number);
}

function equalsButton() {
if(addBoolean) {
answer = firstNumber + secondNumber;
} else if(minusBoolean) {
answer = firstNumber - secondNumber;
}
console.log(answer);
}

function plusButton() {
if(!addBoolean && !minusBoolean) { //Here you would continue for every operator boolean you have
addBoolean = true;
} else if(addBoolean){
firstNumber += secondNumber;
secondNumber = 0;
} else if(minusBoolean) {
firstNumber -= secondNumber;
secondNumber = 0;
minusBoolean = false;
addBoolean = true;
}
}


Please understand that the above code is just theorised and is not tested. If you have any questions or need more help just message me :)
0 Hossein Vahabi · June 3, 2014
thanks buddy <3
0 Ethan Fraser · June 5, 2014
I... I uhh..,. I used a boolean
0 Ethan Fraser · June 1, 2014
I hope you don't mind, I'm just gonna tear that up and put it in code tags, separating the languages for easy reading and for further understanding. I also took the liberty of adding some formatting.

HTML



<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>calculator</title>
</head>

<body>

<div class="calc">
<div class="screen">

<input type="text" name="inner" id="inner" disabled />
<input type="text" name="screen" id="screen" disabled />

</div>

<div class="keyboard">
<table>
<tr>
<td><input type="button" value="1" onClick="cal(this.value)" /></td>
<td><input type="button" value="2" onClick="cal(this.value)" /></td>
<td><input type="button" value="3" onClick="cal(this.value)" /></td>
<td><input type="button" value="+" onClick="operator(this.value)" /></td>
<td><input type="button" value="-" onClick="operator(this.value)" /></td>
</tr>
<tr>
<td><input type="button" value="4" onClick="cal(this.value)" /></td>
<td><input type="button" value="5" onClick="cal(this.value)" /></td>
<td><input type="button" value="6" onClick="cal(this.value)" /></td>
<td><input type="button" value="/" onClick="operator(this.value)" /></td>
<td><input type="button" value="*" onClick="operator(this.value)" /></td>
</tr>
<tr>
<td><input type="button" value="7" onClick="cal(this.value)" /></td>
<td><input type="button" value="8" onClick="cal(this.value)" /></td>
<td><input type="button" value="9" onClick="cal(this.value)" /></td>
<td><input type="button" value="0" onClick="cal(this.value)" /></td>
<td><input type="button" value="." onClick="cal(this.value)" /></td>
</tr>
</table>
<input type="button" value="equal" onClick="equal()" />
<input type="button" value="back" onClick="bck()" />
<input type="button" value="clear" onClick="clr()" />

</div>

</div>

</body>
</html>


CSS

input[name="screen"] {
background: #006;
color: #fff;
height:30px;
width:280px;
font-size:24px;
font-weight:700;
border-radius: 0px 0px 10px 10px;
padding:5px;
border:none;
}

input[name="inner"] {
background: #006;
color: #fff;
height:20px;
width:280px;
font-size:16px;
font-weight:700;
padding:5px;
border-radius: 10px 10px 0px 0px;
border:none;
}

.screen {
border: 2px solid #0CF;
border-radius: 10px;
}

input[onClick="cal(this.value)"],[onClick="operator(this.value)"] {
height:30px;
width:50px;
border: none;
background: #099;
font-size:18px;
font-weight:400;
border-radius: 15px;
}

input[onClick="cal(this.value)"]:hover,[onClick="operator(this.value)"]:hover {
background: #000;
color: #fff;
}

input[onClick="equal()"],[onClick="clr()"],[onClick="bck()"] {
height:30px;
width:87px;
border: none;
background: #099;
font-size:18px;
font-weight:400;
border-radius: 15px;
margin-top:10px;
}

input[onClick="equal()"]:hover,[onClick="clr()"]:hover,[onClick="bck()"]:hover {
background: #000;
color: #fff;
}

.keyboard {
margin-top:10px;
}

.calc {
margin:0px auto;
width:295px;
background: #069;
padding:5px;
border-radius: 10px;
}


JavaScript

numeOne; 
operate;
numTwo;

function cal(data){
document.getElementById('screen').value += data;
}
function operator(data){
operate = data;
numOne = parseFloat(document.getElementById('screen').value);
document.getElementById('screen').value = '';

switch (operate){

case '+':
document.getElementById('inner').value = numOne + ' ' + operate;
break;

case '-':
document.getElementById('inner').value = numOne + ' ' + operate;
break;

case '/':
document.getElementById('inner').value = numOne + ' ' + operate;
break;

case '*':
document.getElementById('inner').value = numOne + ' ' + operate;
break;


}
}
function equal(){

switch (operate){

case '+':
numTwo = parseFloat(document.getElementById('screen').value);
document.getElementById('screen').value = numOne + numTwo;
document.getElementById('inner').value = numOne + ' ' + operate + ' ' + numTwo + ' = ';
break;

case '-':
numTwo = parseFloat(document.getElementById('screen').value);
document.getElementById('screen').value = numOne - numTwo;
document.getElementById('inner').value = numOne + ' ' + operate + ' ' + numTwo + ' = ';
break;

case '/':
if(document.getElementById('screen').value == 0)
document.getElementById('screen').value = 'Error!';
document.getElementById('inner').value = numOne + ' ' + operate + ' ' + '0' + ' = ';
return;
else
numTwo = parseFloat(document.getElementById('screen').value);
document.getElementById('screen').value = numOne / numTwo;
document.getElementById('inner').value = numOne + ' ' + operate + ' ' + numTwo + ' = ';
break;


case '*':
numTwo = parseFloat(document.getElementById('screen').value);
document.getElementById('screen').value = numOne * numTwo;
document.getElementById('inner').value = numOne + ' ' + operate + ' ' + numTwo + ' = ';
break;

}

}
function bck(){
bakk = document.getElementById('screen').value;
document.getElementById('screen').value = bakk.substr(0,bakk.length-1);
}
function clr(){
document.getElementById('screen').value = '';
document.getElementById('inner').value = '';
numOne = 0;
numTwo = 0;
operate = 0;
}


Now that I've done that, I'd like to ask, what exactly is your question? I'm not sure if it's just me but your post is mildly vague on that topic.
-1 Hossein Vahabi · June 2, 2014
there is so many bugs here ... i want to fix them ...

1- I don't know how to create a memory that memorize all of numbers when you click on equal and operate with sth.
1.5- How can i do this ? for example 1 + 1 = 2 then , we could able to operate 2 with some new number and it's goes in infinite.
2- How to fix NaN error ? when you click for example on + gives me that.
3- How can i do this ? 5+5+5+5 + ... + 8 = ... my calculator just do this 5+5=10.


thanks.
  • 1

Javascript

107,113 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators