www.webdeveloper.com
Results 1 to 6 of 6

Thread: need some help with my javascript coding

  1. #1
    Join Date
    Apr 2012
    Posts
    3

    need some help with my javascript coding

    HTML Code:
        <!DOCTYPE html>
        <html>
                <head>
                        <meta charset = "utf-8">
                        <title>Parking Garage</title>
                        <script>
                        function start()
                        {
                                var button = document.getElementById( "calculateButton" );
                                button.addEventListener("click" , calculateCharges, false );
                        }
                        function calculateCharges()
                        {
                                var inputField = document.getElementById( "hoursParked" );
                                var hours = parseFloat( inputField.value );
                                var result = document.getElementById( "result" );
                                var totalResult = document.getElementById( "totalResult" );
                                var totalCharged;
                                var currentCharge;
                                currentCharge = charge( hours );
                                result.innerHTML = "The charge for this customer is $" + currentCharge;
                                totalCharged += currentCharge;
                                totalResult.innerHTML = "The total charge for all customers yesterday is $" + totalCharged;
                        }
                        function charge( hours )
                        {
                                var current;
                                if ( hours <= 3 )
                                        {current = 2;}
                                if ( hours > 3 && hours < 19 )
                                        {current = ((hours - 3) * .5 ) + 2;}
                                if ( hours >= 19 )
                                        {current = 10;}
                                return current;
                        }
                        window.addEventListener( "load", start, false );
                        </script>
                </head>
                <body>
                        <form action = "#">
                                <p><label>
                                        Input number of hours parked in the parking garage. </br>
                                        <input id = "hoursParked" type = "number"></label>
                                        <input id = "calculate" type = "button" value = "calculate"></p>
                        </form>
                        <p id = "result"></p>
                        <p id = "totalResult"></p>
                </body>
        </html>
    now this is some classwork i've been working on for a client side class and its currently not working. i'm sure i'm missing something really simple in here but i cant find it so any and all help would be appreciated

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    What browser are you testing in? addEventListener only works in some; you need attachEvent for others.
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  3. #3
    Join Date
    Apr 2012
    Posts
    3
    i didn't realize that and well i've tried firefox 11 and chrome and i just looked it up and it says addeventlistener should be compatible with both

  4. #4
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    You named the button "calculate", but you are referring to "calculateButton" in your first function.
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  5. #5
    Join Date
    Apr 2012
    Posts
    3
    nice catch i woulda missed that now i ran it through jslint to see if it was a mistyped semicolon and or brackets and i'm getting nothing but this is after a few fixes

    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset = "utf-8">
    		<title>Parking Garage</title>
    		<script>
    		var button = document.getElementById( "calculateButton" );
    		function start()
    		{
    			button.addEventListener("click" , calculateCharges, false );
    		}
    		function calculateCharges()
    		{
    			var inputField = document.getElementById( "hoursParked" );
    			var hours = parseFloat( inputField.value );
    			var result = document.getElementById( "result" );
    			var totalResult = document.getElementById( "totalResult" );
    			var totalCharged;
    			var currentCharge;
    			currentCharge = charge( hours );
    			result.innerHTML = "The charge for this customer is $" + currentCharge;
    			totalCharged += currentCharge;
    			totalResult.innerHTML = "The total charge for all customers yesterday is $" + totalCharged;
    		}
    		function charge( hours )
    		{
    			var current;
    			if ( hours <= 3 )
    				{current = 2;}
    			if ( hours > 3 && hours < 19 )
    				{current = ((hours - 3) * (1/2) ) + 2;}
    			if ( hours >= 19 )
    				{current = 10;}
    			return current;
    		}
    		window.addEventListener( "load", start, false );
    		</script>
    	</head>
    	<body>
    		<form action = "#">
    			<p>  Input number of hours parked in the parking garage. </br>
    				<label><input id = "hoursParked" type = "number"></label>
    				<input id = "calculateButton" type = "button" value = "calculate"></p>
    		</form>
    		<p id = "result"></p>
    		<p id = "totalResult"></p>
    	</body>
    </html>

  6. #6
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Code:
    		<form action = "#">
    			<p>  Input number of hours parked in the parking garage. </br>
    				<label><input id = "hoursParked" type = "number"></label>
    				<input id = "calculateButton" type = "button" value = "calculate"></p>
    		</form>
    Try this, instead:
    Code:
    		<form action = "#">
    			<p>  Input number of hours parked in the parking garage. </br>
    				<input id = "hoursParked" type = "text">
    				<input id = "calculateButton" type = "button" value = "calculate"></p>
    		</form>
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles