Calculator JavaScript issue

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 397,572 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,484 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1054 | Replies: 7

•

Join Date: Sep 2005

Location: St. Louis

Posts: 145

Reputation: kahaj is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

kahaj

Offline

Junior Poster

Calculator JavaScript issue

Oct 19th, 2007

I've written the following code for a JavaScript calculator, but when I hit equal it says "undefined" in the Input field. I can't figure out what's going on with it...

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html />
<head />
<title />Calculator</title>
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS

var inputString = "";
function updateString(value) {
	inputString += value;
	document.Calculator.Input.value = inputString;
}

//STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>

<body />

<form name="Calculator" action="" />
<input type="text" name="Input" /><br />
<input type="button" name="plus" value=" + " onclick="updateString"('+')" />
<input type="button" name="minus" value=" - " onclick="updateString"('-')" />
<input type="button" name="times" value=" x " onclick="updateString"('*')" />
<input type="button" name="div" value=" / " onclick="updateString"('/')" />
<input type="button" name="mod" value=" mod " onclick="updateString"('%')" /><br />
<input type="button" name="zero" value=" 0 " onclick="updateString"('0')" />
<input type="button" name="one" value=" 1 " onclick="updateString"('1')" />
<input type="button" name="two" value=" 2 " onclick="updateString"('2')" />
<input type="button" name="three" value=" 3 " onclick="updateString"('3')" />
<input type="button" name="four" value=" 4 " onclick="updateString"('4')" /><br />
<input type="button" name="five" value=" 5 " onclick="updateString"('5')" />
<input type="button" name="six" value=" 6 " onclick="updateString"('6')" />
<input type="button" name="seven" value=" 7 " onclick="updateString"('7')" />
<input type="button" name="eight" value=" 8 " onclick="updateString"('8')" />
<input type="button" name="nine" value=" 9 " onclick="updateString"('9')" /><br />
<input type="button" name="point" value=" . " onclick="updateString"('.')" />
<input type="button" name="clear" value=" clear " onclick="document.Calculator.Input.value=''; inputString=''" />
<input type="button" name="calc" value=" = " onclick="document.Calculator.Input.value=eval(inputString); inputString=''" />
</form>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html />
<head />
<title />Calculator</title>
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS

var inputString = "";
function updateString(value) {
	inputString += value;
	document.Calculator.Input.value = inputString;
}

//STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>

<body />

<form name="Calculator" action="" />
<input type="text" name="Input" /><br />
<input type="button" name="plus" value=" + " onclick="updateString"('+')" />
<input type="button" name="minus" value=" - " onclick="updateString"('-')" />
<input type="button" name="times" value=" x " onclick="updateString"('*')" />
<input type="button" name="div" value=" / " onclick="updateString"('/')" />
<input type="button" name="mod" value=" mod " onclick="updateString"('%')" /><br />
<input type="button" name="zero" value=" 0 " onclick="updateString"('0')" />
<input type="button" name="one" value=" 1 " onclick="updateString"('1')" />
<input type="button" name="two" value=" 2 " onclick="updateString"('2')" />
<input type="button" name="three" value=" 3 " onclick="updateString"('3')" />
<input type="button" name="four" value=" 4 " onclick="updateString"('4')" /><br />
<input type="button" name="five" value=" 5 " onclick="updateString"('5')" />
<input type="button" name="six" value=" 6 " onclick="updateString"('6')" />
<input type="button" name="seven" value=" 7 " onclick="updateString"('7')" />
<input type="button" name="eight" value=" 8 " onclick="updateString"('8')" />
<input type="button" name="nine" value=" 9 " onclick="updateString"('9')" /><br />
<input type="button" name="point" value=" . " onclick="updateString"('.')" />
<input type="button" name="clear" value=" clear " onclick="document.Calculator.Input.value=''; inputString=''" />
<input type="button" name="calc" value=" = " onclick="document.Calculator.Input.value=eval(inputString); inputString=''" />
</form>

</body>
</html>

•

Join Date: Jun 2006

Location: India

Posts: 6,805

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 338

~s.o.s~

Offline

Rebellion Revamped

Re: Calculator JavaScript issue

Oct 20th, 2007

Some points:

Why are you treating head and body tags as having a empty content model by writing them as <head /> and <body />? It's incorrect.
You are having one too many double quotes in your onclick handlers. onclick="updateString"('+')" should be onclick="updateString('+')"
Placing alert's all over your code or using debugger like 'Firebug' if you are developing for Firefox is a good way to spot such errors.

"I don't accept change. I don't deserve to live."

"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."

•

Join Date: Jun 2006

Location: India

Posts: 6,805

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 338

~s.o.s~

Offline

Rebellion Revamped

Re: Calculator JavaScript issue

Oct 20th, 2007

I would personally go for something along the lines of the below pasted code and make javascript do all the dirty work and keep the markup free of inline javascript:

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<title>Calculator</title>
<script type="text/javascript">
var inputString = '';
function init()
{
    var list = getElementsByClassName('calcBtn')[0].getElementsByTagName('*');
    for(var i = 0, limit = list.length; i < limit; ++i)
    {
        var elem = list[i];
        if(elem.type == 'button')
        {
            var str = elem.value;
            elem.onclick = function(e) {
                e = e || window.event;
                var el = e.srcElement || e.target;
                updateString(el);
            }
        }
    }
}

function getElementsByClassName(findClass)
{
    var result = [];
    var list = document.getElementsByTagName('*');
    for(var i = 0, list = list || [], limit = list.length; i < limit; ++i)
    {
        var e = list[i];
        if(e.className.indexOf(findClass) != -1)
        {
            result.push(e);
        }
    }
    return(result);
}

function updateString(elem)
{
    var value = elem.value.replace(/^\s|\s$/g, '')
    inputString += value;
    elem.form.elements['Input'].value = inputString;
}

function compute(frm)
{
    var element, result;
    try
    {
        element = frm.elements['Input'];
        result = eval(inputString);
        element.value = result || 'Empty Expression';
    }
    catch(e)
    {
        element.value = 'Invalid expression';
    }
    inputString = '';    //reset the string
}

function resetForm()
{
    inputString = '';
}
</script>
</head>

<body onload="init()";>
<form name="Calculator" action="#" onreset = "resetForm();"/>
<input type="text" name="Input" /><br />
<div class="calcBtn">
    <input type="button" name="plus" value=" + " />
    <input type="button" name="minus" value=" - " />
    <input type="button" name="times" value=" * " />
    <input type="button" name="div" value=" / " />
    <input type="button" name="mod" value=" mod " /><br />
    <input type="button" name="zero" value=" 0 " />
    <input type="button" name="one" value=" 1 "  />
    <input type="button" name="two" value=" 2 "  />
    <input type="button" name="three" value=" 3 " />
    <input type="button" name="four" value=" 4 "  /><br />
    <input type="button" name="five" value=" 5 "  />
    <input type="button" name="six" value=" 6 "  />
    <input type="button" name="seven" value=" 7 " />
    <input type="button" name="eight" value=" 8 " />
    <input type="button" name="nine" value=" 9 "  /><br />
    <input type="button" name="point" value=" . "  />
</div>
<input type="reset" name="clear" value=" clear " />
<input type="button" name="calc" value=" = " onclick="compute(this.form);" />
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<title>Calculator</title>
<script type="text/javascript">
var inputString = '';
function init()
{
    var list = getElementsByClassName('calcBtn')[0].getElementsByTagName('*');
    for(var i = 0, limit = list.length; i < limit; ++i)
    {
        var elem = list[i];
        if(elem.type == 'button')
        {
            var str = elem.value;
            elem.onclick = function(e) {
                e = e || window.event;
                var el = e.srcElement || e.target;
                updateString(el);
            }
        }
    }
}

function getElementsByClassName(findClass)
{
    var result = [];
    var list = document.getElementsByTagName('*');
    for(var i = 0, list = list || [], limit = list.length; i < limit; ++i)
    {
        var e = list[i];
        if(e.className.indexOf(findClass) != -1)
        {
            result.push(e);
        }
    }
    return(result);
}

function updateString(elem)
{
    var value = elem.value.replace(/^\s|\s$/g, '')
    inputString += value;
    elem.form.elements['Input'].value = inputString;
}

function compute(frm)
{
    var element, result;
    try
    {
        element = frm.elements['Input'];
        result = eval(inputString);
        element.value = result || 'Empty Expression';
    }
    catch(e)
    {
        element.value = 'Invalid expression';
    }
    inputString = '';    //reset the string
}

function resetForm()
{
    inputString = '';
}
</script>
</head>

<body onload="init()";>
<form name="Calculator" action="#" onreset = "resetForm();"/>
<input type="text" name="Input" /><br />
<div class="calcBtn">
    <input type="button" name="plus" value=" + " />
    <input type="button" name="minus" value=" - " />
    <input type="button" name="times" value=" * " />
    <input type="button" name="div" value=" / " />
    <input type="button" name="mod" value=" mod " /><br />
    <input type="button" name="zero" value=" 0 " />
    <input type="button" name="one" value=" 1 "  />
    <input type="button" name="two" value=" 2 "  />
    <input type="button" name="three" value=" 3 " />
    <input type="button" name="four" value=" 4 "  /><br />
    <input type="button" name="five" value=" 5 "  />
    <input type="button" name="six" value=" 6 "  />
    <input type="button" name="seven" value=" 7 " />
    <input type="button" name="eight" value=" 8 " />
    <input type="button" name="nine" value=" 9 "  /><br />
    <input type="button" name="point" value=" . "  />
</div>
<input type="reset" name="clear" value=" clear " />
<input type="button" name="calc" value=" = " onclick="compute(this.form);" />
</form>
</body>
</html>

Last edited by ~s.o.s~ : Oct 20th, 2007 at 1:58 pm.

•

Join Date: Sep 2005

Location: St. Louis

Posts: 145

Reputation: kahaj is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

kahaj

Offline

Junior Poster

Re: Calculator JavaScript issue

Oct 20th, 2007

Alright, I fixed the html tags. Don't quite know what I was thinking there. As for the extra set of quotes, I just looked at the book that I'm striving to learn from wrong.

Are there any programs out there that can be used to check for general syntax errors in JavaScript?

-kahaj

•

Join Date: Jun 2006

Location: India

Posts: 6,805

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 338

~s.o.s~

Offline

Rebellion Revamped

Re: Calculator JavaScript issue

Oct 21st, 2007

You can try out the Javascript focussed IDE called 'Aptana' or an online Javascript verifier called 'JSLint' to avoid silly mistakes and assistance with the general javascript syntax.

•

Join Date: Jan 2007

Posts: 2,524

Reputation: MidiMagic is on a distinguished road

Rep Power: 7

Solved Threads: 105

MidiMagic

Offline

Posting Maven

Re: Calculator JavaScript issue

Oct 21st, 2007

I would have had a separate function call for each button, and operated a stack with the function calls.

Daylight-saving time uses more gasoline

•

Join Date: Jun 2006

Location: India

Posts: 6,805

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 338

~s.o.s~

Offline

Rebellion Revamped

Re: Calculator JavaScript issue

Oct 22nd, 2007

That would be a lot of work for no real reason assuming that the intent of the OP is to build a working calculator and not learn stack operations.

•

Join Date: Sep 2005

Location: St. Louis

Posts: 145

Reputation: kahaj is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

kahaj

Offline

Junior Poster

Re: Calculator JavaScript issue

Oct 23rd, 2007

Thanks SOS. I'll give Aptana a try.

•

Only community members can participate in forum threads. You must register or log in to contribute.

•

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

•

DaniWeb JavaScript / DHTML / AJAX Marketplace

•

Thread Tools	Display Modes
Show Printable Version Email this Page	Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

•

Similar Threads

javascript issue (JavaScript / DHTML / AJAX)
js calculator (JavaScript / DHTML / AJAX)
NEED HELP PLEASE!! with javascript issue. (JavaScript / DHTML / AJAX)
JavaScript Issue in Mozilla (Java)
How to call a ServerSide Script through Javascript (ASP.NET)
html vs. XML (JavaScript / DHTML / AJAX)

Other Threads in the JavaScript / DHTML / AJAX Forum

Previous Thread: Adding Custom Tags In A Rich TExt Editor
Next Thread: Dynamic Select Boxes

DaniWeb Home > Forums > Web Development > JavaScript / DHTML / AJAX

Calculator JavaScript issue

Calculator JavaScript issue

Re: Calculator JavaScript issue

Re: Calculator JavaScript issue

Re: Calculator JavaScript issue

Re: Calculator JavaScript issue

Re: Calculator JavaScript issue

Re: Calculator JavaScript issue

Re: Calculator JavaScript issue