Results 1 to 3 of 3

Thread: Basic Calculator

  1. #1
    Join Date
    Oct 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Basic Calculator

    Ok, I have spent ages attempting to make a basic addition calculator in Javascript for my webpage, however I am new to all this and can't grasp it, so I just want to complete my course and maybe look at my other options :/

    What I need is a JavaScript script:

    Calculator

    Enter a number to be calculated:

    (A box where the user can enter a number) + (another box where a user can enter a number) = (a box with the answer shown)

    (a 'add' button underneath the first box)

    However my course says that I must edit this script:

    Code:
    <html>
    <head>
    <title>The Adding Calculator</title>
    
    <script language="Javascript">
    <!--
    
    function Calculate()
    
    {
    var first = document.form1.first.value;
    
    var second = document.form1.second.value;
    
    if(document.form1.first.value == 0)
    {
    alert("Please ensure that you have entered a number into each of the boxes");
    return false;
    }
    if (document.form1.second.value == 0)
    {
    alert("Please ensure that you have entered a number into each of the boxes");
    return false;
    }
    	
    addition = parseInt(first)  +  parseInt(second);
    	
    total = first + " " + " + " + second + " " + "=" + " " + addition;
    	
    alert(total);
    		
    }		
    
    
    
    
    //-->
    </script>
    
    </head>
    
    <body>
    
    <h1> The Adding Calculator </h1>
    
    <form name="form1">
    
    
    
    Enter some numbers in these boxes:<br>
    <br>
    
    
    <input type="text" name="first" size="20">+<input type="text" name="second" size="20">  <input type="button" value="Calculate" onClick="Calculate()">
    </form>
    
    
    </body>
    
    </html>
    And incorporate the eval() function - but I have no idea how to do this or what this is :/


    I am new here so sorry if this is in the wrong place or if I have messed anything else up.

    I hope this makes sense. Thanks for any help/advice!
    Last edited by thetestingsite; 10-20-2009 at 06:43 PM. Reason: closed CODE tag

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Here is a demo page with what you want

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <title>Calculator</title>
            <script type="text/javascript">
                function trim(str){
                    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
                }            
                function isNumeric(input){
                    var regexp = /^[0-9]+$/;
                    if (regexp.test(input)) {
                        return true;
                    }
                    return false;
                }            
                function calculate(){
                    var f, s;
                    f = trim(document.forms['form1'].elements['first'].value);
                    s = trim(document.forms['form1'].elements['second'].value);
                    if (f === "" || s === "") {
                        alert("Any one/All of the textbox contains empty space. Enter a number in both textboxes");
                        return false;
                    }
                    if (isNumeric(f) && isNumeric(s)) {					
    					f = parseInt(f);
    					s = parseInt(s);
    					//Commented the validation if the numbers are 0
    					/*if(f === 0 || s === 0){
    						alert("Any one/All of the textbox contains 0. Enter a number greater than 0 in both textboxes");
    					}*/
                    	document.forms['form1'].elements['result'].value = f + s
                    }else {
                        alert("Any one/All of the textbox contains non numbers. Enter a number in both textboxes");
                    }
                }
            </script>
        </head>
        <body>
            <h1>The Adding Calculator</h1>
            <form name="form1">
                <label>
                    Enter Some Numbers in these boxes
                </label>
                <br>
                <br>
                <input type="text" name="first" size="20">
                <label>
                    +
                </label>
                <input type="text" name="second" size="20">
                <label>
                    =
                </label>
                <input type="text" name="result" size="20">
                <br>
                <input type="button" value="Calculate" onclick="calculate()">
            </form>
        </body>
    </html>
    I have commented the validation if the user enter 0 in any one/all of the textbox and try to calculate. Since 0 is a number in my opinion the calculation should be carried out. If you want to stop the function if any of the number is 0 uncomment the highlighted section in the above code.

    It would be better if you avoid the use of eval() in JavaScript if that is possible. If you can do something without using eval() do it that way. In this case you can do what you want without using eval() simply.

    Hope this helps.

  3. The Following User Says Thank You to codeexploiter For This Useful Post:

    aka NatWest (10-25-2009)

  4. #3
    Join Date
    Oct 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much

    I just tested it and it works like a treat! If I could then I'd hug you (and no I'm not a guy so it's not gay )

    Was this the easiest way of doing this btw?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •