I want to modify this program so the values would calculate when I perform an operation instead of pressin equals button

Question

1.00/5 (2 votes)

See more:

This is is a basic javascript calculator and it works fine but i want to modify it so operations would always perform and update instead of me clicking the equals button. what i mean is when i do something like 2+2+2+2 it does not calculate until i press the equal button.






<pre> <div class="container"	>
<br>
<h1><font color="red" style= "font-size:70"> Ayoola's Calculator </font></h1>
<form name="calculator" >
  <input name = "display" placeholder="0" style= "width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px"/>
<br>
<input name = "answer" placeholder="0" style= "width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px"/>
  <br>
<input type="button" value= "7" name="seven"  onClick="document.calculator.display.value+='7'" style="width:60px; font-size:30; margin:3px"/>
<input type="button" value= "8" name="eight"  onClick="document.calculator.display.value+='8'" style="width:60px; font-size:30; "/>
<input type="button" value= "9" name="nine"   onClick="document.calculator.display.value+='9'" style="width:60px; font-size:30; "/>
<input type="button" value= "*" name="multiply" onClick="document.calculator.display.value+='*'" style="width:60px;  font-size:30; "/>
<br>
<input type="button" value= "4" name="four"  onClick="document.calculator.display.value+='4'" style="width:60px; font-size:30;  margin:3px"/>
<input type="button" value= "5" name="five"  onClick="document.calculator.display.value+='5'" style="width:60px; font-size:30; "/>
<input type="button" value= "6" name="six"   onClick="document.calculator.display.value+='6'" style="width:60px; font-size:30; "/>
<input type="button" value= "-" name="minus"  onClick="document.calculator.display.value+='-'" style="width:60px; font-size:30; "/>
<br>
<input type="button" value= "1" name="one"   onClick="document.calculator.display.value+='1'" style="width:60px; font-size:30;  margin:3px"/>
<input type="button" value= "2" name="two"   onClick="document.calculator.display.value+='2'" style="width:60px; font-size:30; "/>
<input type="button" value= "3" name="three" onClick="document.calculator.display.value+='3'" style="width:60px; font-size:30; "/>
<input type="button" value= "+" name="plus"  onClick="document.calculator.display.value+='+'" style="width:60px; font-size:30; "/>
<br>
<input type="button" value= "." name="point"  onClick="document.calculator.display.value+='.'" style="width:60px; font-size:30;  margin:3px"/>
<input type="button" value= "0" name="zero"   onClick="document.calculator.display.value+='0'" style="width:60px; font-size:30; "/>
<input type="button" value= "/" name="divide"  onClick="document.calculator.display.value +='/'" style="width:60px; font-size:30; "/>
<input type="button" value= "=" name="equal"  onClick="document.calculator.answer.value=eval(document.calculator.display.value)" style="width:60px;  font-size:30; "/>
<br>
<input type="reset" value= "C"   onClick= "clear" style="width:256px;  font-size:30; margin:3px "/>


</form>   
</div>

What I have tried:

i have tried using funcyion but didnt work

Posted 14-Feb-17 0:14am

ab_ayo

Updated 14-Feb-17 0:34am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2017-02-14T00:34:00

Solution 2

try this

HTML

<form name="calculator">
            <input name="display" placeholder="0" style="width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px" />
            <br>
            <input name="answer" placeholder="0" style="width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px" />
            <br>
            <input type="button" value="7" name="seven"  style="width:60px; font-size:30; margin:3px" />
            <input type="button" value="8" name="eight"  style="width:60px; font-size:30; " />
            <input type="button" value="9" name="nine"  style="width:60px; font-size:30; " />
            <input type="button" value="*" name="multiply"  style="width:60px;  font-size:30; " />
            <br>
            <input type="button" value="4" name="four" style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="5" name="five"  style="width:60px; font-size:30; " />
            <input type="button" value="6" name="six"  style="width:60px; font-size:30; " />
            <input type="button" value="-" name="minus"  style="width:60px; font-size:30; " />
            <br>
            <input type="button" value="1" name="one"  style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="2" name="two"  style="width:60px; font-size:30; " />
            <input type="button" value="3" name="three"  style="width:60px; font-size:30; " />
            <input type="button" value="+" name="plus"  style="width:60px; font-size:30; " />
            <br>
            <input type="button" value="." name="point"  style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="0" name="zero"  style="width:60px; font-size:30; " />
            <input type="button" value="/" name="divide"  style="width:60px; font-size:30; " />
            <input type="button" value="=" name="equal" onclick="document.calculator.answer.value=eval(document.calculator.display.value)" style="width:60px;  font-size:30; " />
            <br>
            <input type="reset" value="C" onclick="clear" style="width:256px;  font-size:30; margin:3px " />
            <script>
                var buttons = document.querySelectorAll(".container input[type=button]");
                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].onclick = function () {
                        if (this.value != '=') {
                            document.calculator.display.value += '' + this.value;
                            document.calculator.answer.value = eval(document.calculator.display.value)
                        }
                     };
                }


                

            </script>
            </form>

Posted 14-Feb-17 0:34am

Karthik_Mahalingam

Comments

ab_ayo 14-Feb-17 6:53am

You didn't add the onclick functions on the values

Karthik_Mahalingam 14-Feb-17 6:55am

<script>
                var buttons = document.querySelectorAll(".container input[type=button]");
                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].onclick = function () {
                        if (this.value != '=') {
                            document.calculator.display.value += '' + this.value;
                            document.calculator.answer.value = eval(document.calculator.display.value)
                        }
                     };
                }


                

            </script>

ab_ayo 14-Feb-17 6:54am

i ran the code you gave me but it is not doing anyhting

ab_ayo 14-Feb-17 7:06am

Nothing still..

Karthik_Mahalingam 14-Feb-17 7:06am

getting any error?

Karthik_Mahalingam 14-Feb-17 7:18am

copy paste the below code in a notepad file and save it as .html and open in browser

<!doctype html>
<html lang="en">
<head> 
</head>
<body> 

    <div class="container">
        <br>
        
        <form name="calculator">
            <input name="display" placeholder="0" style="width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px" />
            <br>
            <input name="answer" placeholder="0" style="width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px" />
            <br>
            <input type="button" value="7" name="seven"  style="width:60px; font-size:30; margin:3px" />
            <input type="button" value="8" name="eight"  style="width:60px; font-size:30; " />
            <input type="button" value="9" name="nine"  style="width:60px; font-size:30; " />
            <input type="button" value="*" name="multiply"  style="width:60px;  font-size:30; " />
            <br>
            <input type="button" value="4" name="four" style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="5" name="five"  style="width:60px; font-size:30; " />
            <input type="button" value="6" name="six"  style="width:60px; font-size:30; " />
            <input type="button" value="-" name="minus"  style="width:60px; font-size:30; " />
            <br>
            <input type="button" value="1" name="one"  style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="2" name="two"  style="width:60px; font-size:30; " />
            <input type="button" value="3" name="three"  style="width:60px; font-size:30; " />
            <input type="button" value="+" name="plus"  style="width:60px; font-size:30; " />
            <br>
            <input type="button" value="." name="point"  style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="0" name="zero"  style="width:60px; font-size:30; " />
            <input type="button" value="/" name="divide"  style="width:60px; font-size:30; " />
            <input type="button" value="=" name="equal" onclick="document.calculator.answer.value=eval(document.calculator.display.value)" style="width:60px;  font-size:30; " />
            <br>
            <input type="reset" value="C" onclick="clear" style="width:256px;  font-size:30; margin:3px " />
            <script>
                var buttons = document.querySelectorAll(".container input[type=button]");
                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].onclick = function () {
                        if (this.value != '=') {
                            document.calculator.display.value += '' + this.value;
                            document.calculator.answer.value = eval(document.calculator.display.value)
                        }
                     };
                }


                

            </script>
            </form>
        </div>
</body>
</html>

ab_ayo 14-Feb-17 9:13am

Thank you, it is running as a html file. but i want to run it on visual studio code

Karthik_Mahalingam 14-Feb-17 22:56pm

it should work, the code is same only..
you might be missing something in visual studio

ab_ayo 16-Feb-17 4:18am

Thank you very much, everything is fine now. but i need it to always evaluate the last value instead of running the whole operation in the display. thank you

Karthik_Mahalingam 16-Feb-17 4:36am

means?
any sample

ab_ayo 16-Feb-17 4:53am

Each operation performed should be based on what displays in the answer text box.

ab_ayo 16-Feb-17 4:46am

lets say we input 2+4+6/2, your code would give us a result of 9. but if it evaluates based on the last value, it's supposed to give us 6. Just how a normal calculator works

Karthik_Mahalingam 16-Feb-17 4:58am

both are different,
it runs on javascript engine.
if u need to get the exact value, the you wil have to parse the expression

ab_ayo 16-Feb-17 5:19am

how can i parse the expression?

Karthik_Mahalingam 16-Feb-17 6:05am

expected question..
suppose 6+4+3/2
take the last symbol from the string '/' then split the string based on that and evaluate the first part and get the result and evaluate with the '/' and last value....

ab_ayo 16-Feb-17 6:14am

i don't get. Can't I just the toatal of each operation and store in a variable, then start operation on the total.

Karthik_Mahalingam 16-Feb-17 7:08am

its difficult to replicate windows calculator...

F-ES Sitecore · Answer 2 · 2017-02-14T00:19:00

Solution 1

Create a function like

JavaScript

function show(c) {
    document.calculator.display.value += c;
    document.calculator.answer.value=eval(document.calculator.display.value);
}

then change your onclick events from

onClick="document.calculator.display.value+='7'"

to

onClick="show('7')"

Posted 14-Feb-17 0:19am

F-ES Sitecore

Comments

ab_ayo 14-Feb-17 6:32am

Made it worse. The values are no longer displaying on the textbox