Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

JavaScript calculator- function not working

functions

This topic has been archived. This means that you cannot reply to this topic.
7 replies to this topic

#1 IceCream

IceCream

    CC Newcomer

  • Member
  • PipPip
  • 11 posts

Posted 14 March 2015 - 04:48 AM

Hello everyone :) ,

I am trying to create a very simple calculator using forms and functions, but I am having a few problems with it.

I managed to create the structure of the calculator, and then I started coding the function. I can't find the error I made while making it.

I wrote a code that asks the computer to alert "Hi" whenever "1" is written in the operator section (to check if it is working), and to do that I used "getElementById".

Here is the entire code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Calculator</title>
    <style>
        table, th, td {border: 1px solid black; border-collapse: collapse;}
        th,td {padding: 15px;}
        .lightBlue {background-color: #CCFFF5;}
        .pink {background-color: #F27EF2;}
    </style>
</head>
<body>

    <script type="text/javascript">
    var firstNum = document.getElementById("firstNumb").value;
    var secondNum = document.getElementById("secondNumb").value;
    var opr = document.getElementById("oper").value;
    var result = 0;
    document.write(opr);
    function cal() {
        if (parseInt(opr) == 1) {
            alert("Hi");
        }
    }
    </script>



<form>
    <table id="t01">
        <tr class="lightBlue">
            <td>
                <input type="text" value="Enter first number" id="firstNumb" />
            </td>
        </tr>
        <tr class="pink">
            <td>
                <input type="text" value="Enter opertion" id="oper" />
            </td>
        </tr>
        <tr class="lightBlue">
            <td>
                <input type="text" value="Enter second number" id="secondNumb" />
            </td>
        </tr>
        <tr class="pink">
            <td>
                <input type="button" value="Calculate!" id="calcu" onclick="cal()" />
            </td>
        </tr>
        <tr class="lightBlue">
            <td>
                <input type="text" id="Result" />
            </td>
        </tr>
    </table>

    <p>
        Operations: <br />
        1 = Addition <br />
        2 = Subtraction <br />
        3 = Multiplication <br />
        4 = Division
    </p>

</form>

</body>
</html>

Can anyone tell me what is the problem and how can I fix it?

Thank you very much! :)

Ps: I know I put the script in the body, but I changed it to the head and I still have the same problem.


Edited by IceCream, 14 March 2015 - 04:51 AM.


#2 PratikGaur

PratikGaur

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 14 March 2015 - 08:34 AM

Hi,

 

-> css should be in head .. javascript should be just before the body end tag.

-> use placeholder attribute for input fields to show hints instead of values.

->table,tr, td are old school now .. use list, span and styling properly.

-> read about events, scopes, and closures in javascript.

 

Modified your script to make it work as you expect.

<script type="text/javascript">
    var firstNum = document.getElementById("firstNumb").value;
    var secondNum = document.getElementById("secondNumb").value;
    var oper = document.getElementById("oper");
    function cal() {
        var opr = oper.value;
        var result = 0;
        alert(opr);
        if (parseInt(opr) == 1) {
            alert("Hi");
        }
    }
    </script>
 
For javascript its a Helpful read: http://eloquentjavascript.net/


#3 IceCream

IceCream

    CC Newcomer

  • Member
  • PipPip
  • 11 posts

Posted 14 March 2015 - 12:08 PM

 

Hi,

 

-> css should be in head .. javascript should be just before the body end tag.

-> use placeholder attribute for input fields to show hints instead of values.

->table,tr, td are old school now .. use list, span and styling properly.

-> read about events, scopes, and closures in javascript.

 

Modified your script to make it work as you expect.

<script type="text/javascript">
    var firstNum = document.getElementById("firstNumb").value;
    var secondNum = document.getElementById("secondNumb").value;
    var oper = document.getElementById("oper");
    function cal() {
        var opr = oper.value;
        var result = 0;
        alert(opr);
        if (parseInt(opr) == 1) {
            alert("Hi");
        }
    }
    </script>
 
For javascript its a Helpful read: http://eloquentjavascript.net/

 

First, thank you for answering and for your advice. :)

Second, I changed my original code to the one you modified, and it is still not working..



#4 IceCream

IceCream

    CC Newcomer

  • Member
  • PipPip
  • 11 posts

Posted 18 March 2015 - 08:28 AM

Does anyone know how I can solve these problems?



#5 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts

Posted 18 March 2015 - 10:20 AM

Have you stepped through it with Chrome's debugger or Firebug in Firefox?

 

Is your script at the bottom of the body? It refers to objects that won't exist until that point in time.

 

What are you expecting to see vs what you actually see?


Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#6 IceCream

IceCream

    CC Newcomer

  • Member
  • PipPip
  • 11 posts

Posted 19 March 2015 - 05:18 AM

Have you stepped through it with Chrome's debugger or Firebug in Firefox?

Is your script at the bottom of the body? It refers to objects that won't exist until that point in time.

What are you expecting to see vs what you actually see?


I am using Firefox's debugger.
My script is in the head, but I also tried to put it in the beginning of the body and it didn't work.
What I expect to see- when I will put "1" in the Operator section and then press the "Calculate" button, I will get an alert saying "Hi". I did it just to check if the function is working (and it isn't).

Edited by IceCream, 19 March 2015 - 05:22 AM.


#7 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts

Posted 19 March 2015 - 09:34 AM

That's your problem: the HTML rendering engine creates objects as they are encountered, and runs scripts as they are encountered. In your case, this script runs:

    var firstNum = document.getElementById("firstNumb").value;
    var secondNum = document.getElementById("secondNumb").value;
    var opr = document.getElementById("oper").value;

The result is that firstNum, secondNum, and opr are all null. Why? Because the getElementByID functions do not find the elements that have not yet been created.

 

After that bit of script runs, the form is created, but those three variables are permanently stuck as null, because you never attempt to set them again.

 

You need to put your script at the very end (better), or wrap the whole thing in a document.ready() call (best).


Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#8 lespauled

lespauled

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1360 posts

Posted 19 March 2015 - 11:09 AM

You should create an event that fires it, like on button press, etc and does the calculation


My Blog: http://forum.codecal...699-blog-77241/
"Women and Music: I'm always amazed by other people's choices." - David Lee Roth




Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download