Making a simple calculator in Javascript using an Object

Question

I have been stuck on this and don't really know how to go about fixing it myself. I've tried using firebug and getting parts of it to work, but it's just so frustrating and time consuming for such a small script. Perhaps I'm using the switch statement wrong...

Essentially I'm making a very simple calculator using an Object for the first time... Any little bit will help--any push in the right direction :)

Thanks so much for reading!

The HTML file is this:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Homework 8</title>
        <link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>

<body>
    <div id="calc">
        <p><label for="num1">First Number:<input type="text" id="num1" class="txt" /></label></p>
        <p><label for="num2">Second Number: <input type="text" id="num2" class="txt"/></label></p>
        <p><label for ="add"><input type="radio" name="operation" id="add" value="add"/>Add</label> 
        <label for ="sub"><input type="radio" name="operation" id="sub" value="sub"/>Subtract</label> 
        <label for ="mult"><input type="radio" name="operation" id="mult" value="mult"/>Multiply</label> 
        <label for ="div"><input type="radio" name="operation" id="div" value="div"/>Divide</label></p>
        <p><input type="button" id="calculate" value="Do Calculation"/></p>
    </div>
    <div id="result"></div>
<script type="text/javascript" src="js/hw8.js"></script>
<script type="text/javascript">obj.init();</script>
</body>
</html>

The Javascript file is this short script:

var obj = {

add : document.getElementById("add"),
sub : document.getElementById("sub"),
mult : document.getElementById("mult"),
div : document.getElementById("div"),
num1 : document.getElementById("num1"),
num2 : document.getElementById("num2"),
result : document.getElementById("result"),
calculate : document.getElementById("calculate"),

    init : function(){

        obj.calculate.onclick = obj.resultArea;

    },

    resultArea : function(){

        var num1Value = parseFloat(num1.value);
        var num2Value = parseFloat(num2.value);

        if (!isNaN(obj.num1Value) = true || !isNaN(obj.num2Value) = true){
            alert("Please enter only numbers in the First Number and Second Number fields!");
            return;
        }

        switch(true){
            case obj.add.checked : var ans = (num1Value + num2Value); break;
            case obj.sub.checked : var ans = (num1Value - num2Value); break;
            case obj.mult.checked : var ans = (num1Value * num2Value); break;
            case obj.div.checked && num2Value != 0 : var ans = (num1Value / num2Value); break;
            case obj.div.checked && num2Value = 0 : alert("cannot divide by zero"); break;
        }


        var p = document.createElement("p");
        p.appendChild(document.createTextNode("The answer is" + ans));
        obj.result.appendChild(p);
    },

}

It would be helpful if you would put your code on jsFiddle or point us to a working link. — Brian Hoover
– Brian Hoover, Commented Mar 23, 2012 at 21:29
Since the title of the HTML page is Homework 8, is this a homework question? If so, tag it as such. — mellamokb
– mellamokb, Commented Mar 23, 2012 at 21:30

max · Accepted Answer · 2012-03-23 22:31:11Z

if (!isNaN(obj.num1Value) = true || !isNaN(obj.num2Value) = true)

Besides the the error due confusing the assignment operator (=) and the equality comparison operator (==) operator this is overly complex.

If not obj.num1Value is not a number is true and not obj.num2alue is not a number is true do?

Say what?

Consider this formulation:

if ( isNaN(obj.num1Value) || isNaN(obj.num2Value) )

Ah, if either obj.num1Value or obj.num2Value is not an number do...

Also you may want to declare the ans and ´p´ variable once at the top of the resultArea function:

resultArea : function(){
    var ans;
    var p;

    // ...

    switch(true){
        // Note that we removed var keyword! 
        case obj.add.checked : ans = (num1Value + num2Value); break;
            // ..

Also if you use a line break for each case in the switch statement it becomes much easier to follow the control flow:

switch(true){
        case obj.add.checked :  
            ans = (num1Value + num2Value); 
            break;
        case obj.sub.checked :  
            ans = (num1Value - num2Value); 
            break;
        case obj.mult.checked :  
            ans = (num1Value * num2Value); 
            break;
        case obj.div.checked && num2Value !== 0 : 
            ans = (num1Value / num2Value); 
            break;
        case obj.div.checked && num2Value == 0 : 
            alert("cannot divide by zero"); 
            break;
    }

You are not you are not covering the scenario where you do not have an answer:

 if ( typeof ans !== 'string') {
    p.appendChild(document.createTextNode("The answer is forever blowing in the wind"));
 }

thank you! I was so bad a few weeks ago... wonder what I'll think about this first question in 10 years haha!

Brian Hoover · Accepted Answer · 2012-03-23 21:37:41Z

0

I'm not able to get the jsFiddle to work, but two of your problems are your comparisons.

isNaN(obj.num1Value) = true

is not a legal statement. You need to modify this to:

isNaN(obj.num1Value) == true

This will do a comparison. So, the changed lines would look like:

if (!isNaN(obj.num1Value) == true || !isNaN(obj.num2Value) == true){
 .....

and:

case obj.div.checked && num2Value == 0 : alert("cannot divide by zero"); break;

The only change in both these cases is to change from = to ==

answered Mar 23, 2012 at 21:37

Brian Hoover

7,9652 gold badges31 silver badges41 bronze badges

Comments

pimvdb · Accepted Answer · 2012-03-23 21:38:23Z

0

You're confusing the assignment operator (=) and the equality comparison operator (==).

The = operator is used to assign a value to a variable.

If you want to compare a value with true, you would use:

isNaN(obj.num1Value) == true

Note the removed ! as well because isNaN returns true for an invalid number.

Second, you have var num1Value but you're accessing it as if the object has a property called as such (obj.num1Value). You have to use either but not both (you're storing it at a different place than where you're fetching it from).

answered Mar 23, 2012 at 21:38

pimvdb

155k80 gold badges313 silver badges358 bronze badges

1 Comment

AlecPerkey Over a year ago

Thanks so much for the help. It all works perfectly now...weird thing is Google Chrome seems to not care if I use reference the object property as a variable. This has been throwing me off =/

akadam · Accepted Answer · 2015-10-09 07:41:39Z

function c(val)
{
	document.getElementById("d").value=val;
}
function v(val)
{
	document.getElementById("d").value+=val;
}
function e() 
{ 
	try 
	{ 
	  c(eval(document.getElementById("d").value)) 
	} 
	catch(e) 
	{
	  c('Error') 
	} 
}

h2
{
text-align:center;
text-decoration:underline;
}
.box
{
background-color:#3d4543;
height:300px;
width:250px;
border-radius:10px;
position:relative;
top:80px;
left:40%;
}
.display
{
background-color:#222;
width:220px;
position:relative;
left:15px;
top:20px;
height:40px;
}
.display input
{
position:relative;
left:2px;
top:2px;
height:35px;
color:black;
background-color:#bccd95;
font-size:21px;
text-align:right;
}
.keys
{
position:relative;
top:15px;
}
.button
{
width:40px;
height:30px;
border:none;
border-radius:8px;
margin-left:17px;
cursor:pointer;
border-top:2px solid transparent;
}
.button.gray
{
color:white;
background-color:#6f6f6f;
border-bottom:black 2px solid;
border-top:2px #6f6f6f solid;
}
.button.pink
{
color:black;
background-color:#ff4561;
border-bottom:black 2px solid;
}
.button.black
{
color:white;
background-color:303030;
border-bottom:black 2px solid;
border-top:2px 303030 solid;
}
.button.orange
{
color:black;
background-color:FF9933;
border-bottom:black 2px solid;
border-top:2px FF9933 solid;
}
.gray:active
{
border-top:black 2px solid;
border-bottom:2px #6f6f6f solid;
}
.pink:active
{
border-top:black 2px solid;
border-bottom:#ff4561 2px solid;
}
.black:active
{
border-top:black 2px solid;
border-bottom:#303030 2px solid;
}
.orange:active
{
border-top:black 2px solid;
border-bottom:FF9933 2px solid;
}
p
{
line-height:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<h2>Calculator Created by Anoop Kumar Sharma</h2>
<div class="box">
	<div class="display"><input type="text" readonly size="18" id="d"></div>
	<div class="keys">
		<p><input type="button" class="button gray" value="mrc" onclick='c("Created....................")'><input type="button" class="button gray" value="m-" onclick='c("...............by............")'><input type="button" class="button gray" value="m+" onclick='c(".....................Anoop")'><input type="button" class="button pink" value="/" onclick='v("/")'></p>
		<p><input type="button" class="button black" value="7" onclick='v("7")'><input type="button" class="button black" value="8" onclick='v("8")'><input type="button" class="button black" value="9" onclick='v("9")'><input type="button" class="button pink" value="*" onclick='v("*")'></p>
		<p><input type="button" class="button black" value="4" onclick='v("4")'><input type="button" class="button black" value="5" onclick='v("5")'><input type="button" class="button black" value="6" onclick='v("6")'><input type="button" class="button pink" value="-" onclick='v("-")'></p>
		<p><input type="button" class="button black" value="1" onclick='v("1")'><input type="button" class="button black" value="2" onclick='v("2")'><input type="button" class="button black" value="3" onclick='v("3")'><input type="button" class="button pink" value="+" onclick='v("+")'></p>
		<p><input type="button" class="button black" value="0" onclick='v("0")'><input type="button" class="button black" value="." onclick='v(".")'><input type="button" class="button black" value="C" onclick='c("")'><input type="button" class="button orange" value="=" onclick='e()'></p>
	</div>
</div>

</body>

Collectives™ on Stack Overflow

Making a simple calculator in Javascript using an Object

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related