#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    4
    Rep Power
    0

    How to make a simple calculator with javascript ?


    Hi guys,

    I'm trying to write a simple program that will take the value from
    inputbox1 and inputbox2 and show the sum. For some reason it is concatenating the result of string1 and string 2 as a string.

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function validateForm()
    {
    var x= parseFloat(document.forms["myForm"]["v1"].value,10);
    var y= parseFloat(document.forms["myForm"]["v1"].value,10);
    var z = x+y ;
    myForm.r.value = z;

    }
    </script>
    </head>

    <body>
    <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    First value: <input name="v1">
    Second value: <input name="v2">
    Result: <input name="r">

    <input type="submit" value="Submit">
    </form>
    </body>

    </html>
  2. #2
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Originally Posted by chris933
    For some reason it is concatenating the result of string1 and string 2 as a string.
    No, it doesn't. JavaScript converts the v1 field to a float twice and adds this number to itself, because that's what you told it to do:

    javascript Code:
    var x = parseFloat(document.forms.myForm.v1.value);
    var y = parseFloat(document.forms.myForm.v1.value);
    var z = x+y ;

    By the way, the parseFloat(string) function does not have a second parameter. You seem to confuse it with parseInt(string, radix).
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    4
    Rep Power
    0
    ok...I fixed the error, now I have added a simple function, but for some reason it is showing the result




    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function validateForm()
    {
    var consumption= parseFloat(document.forms["myForm"]["v1"].value,1);
    var density= parseFloat(document.forms["myForm"]["v2"].value,1);
    var z = x*1000*(1/y);
    myForm.r.value = z;

    }
    </script>
    </head>

    <body>
    <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    Oil Consumption : <input value = 900 name="v1">
    Density Oil: <input value = 0.86 name="v2">
    Result: <input name="r">

    <input type="submit" value="Submit">
    </form>
    </body>

    </html>
  6. #4
  7. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    OK, take a deep breath. Then go through your code line by line and carefully check it. Do you see the problem? Hint: There's an issue with the variables.

    You need to take more time when you write code. Don't rush it. Saving a few seconds doesn't get you anywhere if you lose hours waiting for us to fix the bugs. You should also consider using an IDE like Netbeans instead of a plain editor. It will notify you of obvious mistakes.

    And I just told you that parseFloat(string) only takes a single value. Any additional argument is simply discarded. What is the 1 supposed to do, anyway?
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    4
    Rep Power
    0
    okay, I took a deep breath and it actually worked. I was able to find the error. This is how my code now looks like :


    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function validateForm()
    {
    var consum= parseFloat(document.forms["myForm"]["v1"].value,1);
    var density= parseFloat(document.forms["myForm"]["v2"].value,1);
    var z = consum*1000*(1/density);
    myForm.r.value = z;

    myForm.r2.value = z + 2 ;

    }
    </script>
    </head>

    <body>
    <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    Oil Consumption : <input value = 900 name="v1">
    Density Oil: <input value = 0.86 name="v2">
    Result: <input name="r">
    Result2: <input name="r2">

    <input type="submit" value="Submit">
    </form>
    </body>

    </html>

    now I was wondering if it is possible to hold the page before java script return this :


    Input was received as:

    v1=900&v2=0.86&r=1046511.6279069768&r2=1046513.6279069768

    This page was returned to you from the server. The server has processed your input and returned this answer.

    It is not a part of the JavaScript tutorial to teach you how the server is processing this input. If you want to learn more about processing form input, please read our PHP or ASP tutorial.

    Use the back button in the browser to return to the example.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    Sydney Australia
    Posts
    186
    Rep Power
    84
    Originally Posted by chris933
    okay, I took a deep breath and it actually worked.

    Code:
    var consum= parseFloat(document.forms["myForm"]["v1"].value,1);
    var density= parseFloat(document.forms["myForm"]["v2"].value,1);
    Take another deep breath, and re-read this from Jacques

    Originally Posted by Jacques
    And I just told you that parseFloat(string) only takes a single value. Any additional argument is simply discarded. What is the 1 supposed to do, anyway?
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    Sydney Australia
    Posts
    186
    Rep Power
    84
    Originally Posted by chris933
    now I was wondering if it is possible to hold the page before java script return this :
    Code:
    function validateForm()
    {
    var consum= parseFloat(document.forms["myForm"]["v1"].value);
    var density= parseFloat(document.forms["myForm"]["v2"].value);
    var z = consum*1000*(1/density);
    myForm.r.value = z;
    
    myForm.r2.value = z + 2 ;
    
    return false;  // return false will stop the submit from proceeding
    }
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    4
    Rep Power
    0
    okay , I made a few changes to the program, now it is not calculating the Oil Consumption(l/a) for var z



    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function validateForm()


    {
    var consum= parseFloat(document.forms["myForm"]["C12"].value,1);
    var density= parseFloat(document.forms["myForm"]["C15"].value,1);
    var z = consum*1000*(1/density);
    myForm.C13.value = z;

    }
    </script>
    </head>

    <body>
    <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">


    Beds: <input value = 1100 name = "C6">
    Beds: <input name = "C7">

    Oil Consumption(t/a): <input value = 900 name = "C12">
    Oil Consumption(l/a) : <input name="C13">
    Caloric value of Oil(kw/l): <input value = 10.57 name="C14">
    Density Oil (kg/l) : <input value = 0.86 name="C15">
    Efficieny factor : <input value = 0.85 name="C16">
    Efficiency factor of Oil(kw/l): <input value = 0.85 name="C16">


    Result2: <input name="r2">

    <input type="submit" value="Submit">
    </form>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo