Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    calculate_click will not work

    I was wondering if someone could please look at this and tell me what I am doing wrong. I am missing something and I am not understanding this very well. I think I need a tutor. The form comes up but nothing happens when I hit the calculate button. Thank You Very Much.

    Javascript page

    Code:
    function Calculate_Click()
    {
    	var name = document.buttonForm.name.value;
    	var email = document.buttonForm.email.value;
    	var numButtons = parseFloat(document.buttonForm.numButtons.value);
    	var price = 0.99;
    	var salesTax = 0.06;
    	var shipping = 2.00;
    	var total = numButtons * price;
    	var taxAmount = total * salesTax;
    	var newTotal = taxAmount + shipping + total;
    	
    	document.buttonForm.name.value = name;
    	document.buttonForm.email.value = email;
    	document.buttonForm.numButtons.value = numButtons;
    	document.buttonForm.price.value = price.toFixed(2);
    	document.buttonForm.salesTax.value = salesTax.toFixed(2);
    	document.buttonForm.shipping.value = shipping.toFixed(2);
    	document.buttonForm.total.value = total.toFixed(2);
    	document.buttonForm.taxAmount.value = taxAmount.toFixed(2);
    	document.buttonForm.newTotal.value = newTotal.toFixed(2);
    }
    HTML PAGE

    Code:
    <!doctype html>
    <html>
    <head>
    <title>Buzz Buttons</title>
    <meta charset="utf-8" src="buzzButtons.js" /></script>
    </head>
    <body>
    	<form name="buttonForm" action="#">
    		
    			<label for="name">Name: </label>
    			<input type="text" name="name" id="name" /><br />
    			
    			<label for="email">Email: </label>
    			<input type="text" name="email" id="email" /><br />
    			
    			<label for="numButtons">Number Of Buttons: </label>
    			<input type="text" name="numButtons" id="numButtons" /><br />
    			
    			<label for="Price">Price: </label>
    			<input type="text" name="price" id="price" /><br />
    			
    			<label for="salesTax">Sales Tax: </label>
    			<input type="text" name="salesTax" id="salesTax" /><br />
    			
    			<label for="shipping">Shipping: </label>
    			<input type="text" name="shipping" id="shipping" /><br />
    			
    			<label for="total">Total: </label>
    			<input type="text" name="total" id="total" /><br />
    			
    			<label for="taxAmount">Tax Amount: </label>
    			<input type="text" name="taxAmount" id="taxAmount" /><br />
    			
    			<label for="newTotal">New Total : </label>
    			<input type="text" name="newTotal" id="newTotal" /><br />
    			<input type="button" id="calculate" value="calculate" onclick="Calculate_Click()" />
    		</form>
    	</body>
    </html>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    This code is just fine. The problem must be somewhere else

    See: http://jsbin.com/EKuqIkE/1/edit

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Missing <script> tag

    <meta charset="utf-8" src="buzzButtons.js" /></script>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    woa ... good catch

    Few lines I didn't copy ... I should pay more attention

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    It is not a good idea to use the same name for an HTML element and a Javascript variable. That can cause problems in certain browsers.

    You should also avoid giving names or id's to your variables/functions/arguments/forms words which are HTML/JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'click' or 'href' or 'closed' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank You

    Hey thank you very much it was the "name" that I has in there.


  •  

    Tags for this Thread

    Posting Permissions

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