Question:

Simple JavaScript code: Need help please! 10 pts!?

by  |  earlier

0 LIKES UnLike

Hi guys

I've been learning JavaScript and I tried a simple little calculator thing. I know that JavaScript has a calculator code thing built in, (see http://www.javascriptkit.com/script/cut18.shtml) but I wanted to test my skills with this way.

Here is my HTML:

************

<html>

<head>

<title>My Calculator!!!</title>

<script language="JavaScript" src="calculator.js"></script>

</head>

<body>

<center>

<br>

<br>

<br>

<br>

<br>

<br>

<form name="calculator">

<input type="text" name="firstValue" maxlength="10">

<input type="button" name="plus" value="+" onclick="plus()"> / <input type="button" name="minus" value="-" onclick="minus()"> / <input type="button" name="multiply" value="X" onclick="multiply()"> / <input type="button" name="divide" value="÷" onclick="divide()">

<input type="text" name="secondValue" maxlength="10">

<input type="button" name="equals" value="=" onclick="calculate()">

</form>

</body>

</html>

************

And here is my JavaScript

************

//declaring variables

//getting first & second values from the form & parsing the integers

var firstValue = document.forms['calculator'].firstValue....

firstValue = parseInt(firstValue);

var secondValue = document.forms['calculator'].secondValue...

secondValue = parseInt(firstValue);

//variables to hold whether plus, minus etc are activated

var plus =0;

var minus =0;

var multiply =0;

var divide =0;

//the result of the calculation

var result;

//these will change the operation on the click of the plus, minus etc buttons

function plus(){

plus =1;

}

function minus(){

minus =1;

}

function multiply(){

multiply =1;

}

function divide(){

divide =1;

}

//the calculation function. basically, does the operation on condition that that operation has been selected. then displays result in an alert.

function calculate(){

if(plus == 1){

result = firstValue + secondValue;

alert("The answer is " +result);

}

if(minus == 1){

result = firstValue - secondValue;

alert("The answer is " +result);

}

if(multiply == 1){

result = firstValue * secondValue;

alert("The answer is " +result);

}

if(divide == 1){

result = firstValue / secondValue;

alert("The answer is " +result);

}

}

***********

It doesn't seem to do anything, and I can't seem to see anything wrong with it.

Your help would be much appreciated!

-James =)

 Tags:

   Report
Answer The Question I've Same Question Too

1 ANSWERS

Sort By: Date  |  Rating

  1. There are a number of things wrong. Using individual functions to store variables values won&#039;t work, as the value of that variable is exclusive to that function unless you export that value. Also using the function names identical to variables names is asking for trouble. The form elements I would give id&#039;s and access them with document.getElementById instead, with the exception that I add a hidden input to store the value of whether the calculation to be performed is + or - or * or / and give the hidden input both a name and an id, then access the name locally to store it&#039;s value, and use the id to access it from the function. Also, parseInt() would be a poor choice in a calculator as it does not allow decimal point entries (try multiplying 3.99 * 3 and it would come up with 9 as it does not understand 3.99 and uses the first integer before the . so it only sees 3) so parseFloat() would be the choice here. Then the eval() function is used to obtain the outcome of the logical value of the two inputs and the hidden input values. Also I added in a reset button C, and added error check for isNaN in case of non-numerical entry. Try this example:

    &lt;!DOCTYPE -don&#039;t forget to use one of these

    &lt;html&gt;

    &lt;head&gt;

    &lt;title&gt;&lt;/title&gt;

    &lt;script type=&quot;text/javascript&quot;&gt;

    function calculate()

    {

    a = document.getElementById (&quot;firstValue&quot;);

    b = document.getElementById (&quot;secondValue&quot;);

    c = document.getElementById (&quot;hidValue&quot;);

    firstValue = parseFloat(a.value);

    secondValue = parseFloat(b.value);

    hid = c.value;

    result = eval (firstValue+hid+secondValue);

    if (isNaN(result))

    {

    alert(&quot;You did not enter a number&quot;);

    }

    else

    {

    alert(result);

    }

    }

    &lt;/script&gt;

    &lt;/head&gt;

       &lt;!--End Head--&gt;

    &lt;body&gt;

    &lt;form id=&quot;calculator&quot; action=&quot;get&quot;&gt;

    &lt;p&gt;

    &lt;input type=&quot;text&quot; id=&quot;firstValue&quot; maxlength=&quot;10&quot; value=&quot;&quot; /&gt;

    &lt;input type=&quot;button&quot; value=&quot;+&quot; onclick= &quot;this.form.hiddenValue.value =&#039;+&#039;&quot; /&gt; /

    &lt;input type=&quot;button&quot; value=&quot;-&quot; onclick= &quot;this.form.hiddenValue.value =&#039;-&#039;&quot; /&gt; /

    &lt;input type=&quot;button&quot; value=&quot;X&quot; onclick= &quot;this.form.hiddenValue.value =&#039;*&#039;&quot; /&gt; /

    &lt;input type=&quot;button&quot; value=&quot;÷&quot; onclick= &quot;this.form.hiddenValue.value =&#039;/&#039;&quot; /&gt;

    &lt;input type=&quot;hidden&quot; id=&quot;hidValue&quot; name=&quot;hiddenValue&quot; value=&quot;&quot; /&gt;

    &lt;input type=&quot;text&quot; id=&quot;secondValue&quot; maxlength=&quot;10&quot; value=&quot;&quot; /&gt;

    &lt;input type=&quot;button&quot; value=&quot;=&quot; onclick= &quot;calculate()&quot; /&gt;

    &lt;input type=&quot;reset&quot; value=&quot;C&quot; /&gt;

    &lt;/p&gt;

    &lt;/form&gt;

    &lt;/body&gt;

    &lt;/html&gt;

    Note: I had to leave some spaces after the getElementById before the ( and also after eval before the ( and also in the onclicks so yahoo would not drop the code

You're reading: Simple JavaScript code: Need help please! 10 pts!?

Question Stats

Latest activity: earlier.
This question has 1 answers.

BECOME A GUIDE

Share your knowledge and help people by answering questions.
Register Now