www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Display text onblur

  1. #1
    Join Date
    Aug 2008
    Posts
    40

    resolved [RESOLVED] Display text onblur

    I have this basic paycheck calculator up, but I want to display the Overtime Hours, if there is any overtime, w/o keystroking it in. So, when Total Hours loses focus the Overtime Hours is displayed, but the tab has moved to Pay Scale, as it does now. Currently itís displaying 0. I know Iím making a basic mistake and need fresh eyes. See code below.

    Thanks. . .

    var $ = function(id)
    { return document.getElementById(id);
    };

    var calculate = function()
    { var totalHours = parseFloat( $("totalHours").value );
    var overTmHours = parseFloat( $("overTmHours").value );
    var rateOfPay = parseFloat( $("rateOfPay").value );

    var regularPay;
    var overTmPay;
    var myPayCheck;

    regularPay = (totalHours > 40) ? (40 * rateOfPay) : totalHours * rateOfPay;

    overTmPay = (totalHours > 40) ? ((totalHours - 40) * rateOfPay) * 1.5 : 0;

    myPayCheck = regularPay + overTmPay;

    $("totalPay").value = myPayCheck.toFixed(2);

    };

    var shwOvrTime = function()
    { overTmHours = (totalHours >= 40) ? totalHours - 40 : 0;
    $("overTmHours").value = overTmHours;
    };

    window.onload = function () {
    $("calculate").onclick = calculate;
    $("totalHours").focus();
    };

    Here's the html. . .
    <h1>Pay Check Calculator</h1>

    <p>Enter the values below and click "Calculate".</p>

    <p><label for="totalHours">Total Hours:</label></p>
    <input type="text" id="totalHours" />

    <p><label for="overTmHours">Overtime Hours:</label></p>
    <input type="text" id="overTmHours" disabled="disabled" />

    <p><label for="rateOfPay">Pay Scale:</label></p>
    <input type="text" id="rateOfPay" />

    <p><label for="totalPay">Total Paycheck:</label></p>
    <input type="text" id="totalPay" disabled="disabled" />

    <p><label>&nbsp;</label></p>
    <input type="button" id="calculate" value="Calculate Pay" />

  2. #2
    Join Date
    Aug 2008
    Posts
    40
    Sorry, i left off a line at he end.
    . . .

    var $ = function(id)
    { return document.getElementById(id);
    };


    var calculate = function()
    { var totalHours = parseFloat( $("totalHours").value );
    var overTmHours = parseFloat( $("overTmHours").value );
    var rateOfPay = parseFloat( $("rateOfPay").value );

    var regularPay;
    var overTmPay;
    var myPayCheck;

    regularPay = (totalHours >= 40) ? (40 * rateOfPay) : totalHours * rateOfPay;

    overTmPay = (totalHours > 40) ? ((totalHours - 40) * rateOfPay) * 1.5 : 0;

    myPayCheck = regularPay + overTmPay;

    $("totalPay").value = myPayCheck.toFixed(2);

    };


    var shwOvrTime = function()
    { overTmHours = (totalHours >= 40) ? totalHours - 40 : 0;
    $("overTmHours").value = overTmHours;
    };


    window.onload = function () {
    $("calculate").onclick = calculate;
    $("totalHours").focus();
    $("totalHours").onblur = shwOvrTime;
    };

  3. #3
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    943
    Well you were right about this being simple, though it's often the simple mistakes that get hidden the best in code.

    So essentially what happens is your shwOvrTime() function runs and it checks to see if totalHours is greater than or equal to 40. The problem is, totalHours is a private variable inside of the calculate() function. Thus the value of totalHours (while inside of shwOvrTime() is not greater than or equal to 40.

    And I should also mention that totalHours does not get set until you run the calculate() function. So basically you need to also set the value of totalHours inside of the shwOvrTime() function. And for good practice, you should probably declare your variables as global variables just to clean things up (since they exist in multiple places).

    Code:
    	var totalHours = overTmHours = rateOfPay = 0;
    	var $ = function(id) { return document.getElementById(id); }
    
    	var calculate = function() {
    		totalHours = parseFloat($("totalHours").value);
    		overTmHours = parseFloat($("overTmHours").value);
    		rateOfPay = parseFloat($("rateOfPay").value);
    		
    		var regularPay = (totalHours > 40) ? (40 * rateOfPay) : totalHours * rateOfPay;
    		var overTmPay = (totalHours > 40) ? ((totalHours - 40) * rateOfPay) * 1.5 : 0;
    		var myPayCheck = regularPay + overTmPay;
    		
    		$("totalPay").value = myPayCheck.toFixed(2);
    	}
    
    	var shwOvrTime = function() {
    		totalHours = parseFloat($("totalHours").value);
    		overTmHours = (totalHours >= 40) ? totalHours - 40 : 0;
    		$("overTmHours").value = overTmHours;
    	}
    
    	window.onload = function () {
    		$("calculate").onclick = calculate;
    		$("totalHours").focus();
    		$("totalHours").onblur = shwOvrTime;
    	}
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  4. #4
    Join Date
    Aug 2008
    Posts
    40
    Yes. . . isnít always so. . .:-) . . . Itís always the easy ones. . . Being self-taught and learning javascript on the fly, I really appreciate your quick response and the advice.

    Another question, if you donítí mind. Not sure if you saw this http://www.webdeveloper.com/forum/sh...-radio-buttons , but I am working on something similar with clothing. Would you happen to know how the arrays are setup. I am guessing itís a multi-level(?) array, but I canít seem to make it work.

    No hurry, again thanks for the help.

    . . .

  5. #5
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    Simplest way is to use single-dimension arrays, however, it will consume more space in terms of lines of code. You can swap the switch statement for if-else statements if you wish. The <div> is just there in case you want to customize it on the screen or do something else snazzy with it.

    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<script type = "text/javascript">
    			function populate(x) {
    				var pantsNames = ["Nike", "Adidas", "GAP"];
    				var pantsValues = ["1", "2", "3"];
    				
    				var shirtsNames = ["Red", "Blue", "Green"];
    				var shirtsValues = ["4", "5", "6"];
    				
    				var sel = document.getElementById("clothing");
    				
    				switch(x.value) {
    					case "pants":
    						for(var i = 0; i < pantsNames.length; i++) {
    							sel.options[i] = new Option(pantsNames[i], pantsValues[i]);
    						}
    					break;
    					case "shirts":
    						for(var i = 0; i < shirtsNames.length; i++) {
    							sel.options[i] = new Option(shirtsNames[i], shirtsValues[i]);
    						}
    					break;
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id = "radioContainer">
    			<form action = "">
    				<label for = "pants">Pants</label>
    				<input type = "radio" name = "clothes" value = "pants" onClick = "populate(this)" />
    				<label for = "shirts">Shirts</label>
    				<input type = "radio" name = "clothes" value = "shirts" onClick = "populate(this)" />
    			</form>
    		</div>
    		<select id = "clothing"></select>
    	</body>
    </html>

  6. #6
    Join Date
    Aug 2008
    Posts
    40
    Sorry for the delayed response. This looks like it'll work. I appreciate your time and help.

    Thanks.

    . . .

  7. #7
    Join Date
    Aug 2008
    Posts
    40

    resolved

    Thanks. . .

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