Hey all,
I neeed to subtract values from two text boxes and then show the difference into a html label.
textbox 1 = 10
textbox 2 = 5
label = 5
Basically I need to enter times, like 10:00 and 12:00 and it calculate that the difference was 2 hours.
Javascript is a big weaknees of mine (duh), even with my 3 books LOL
any tips on where to look for this or can point me into the direction? Ive tried google, but it only brings up time date differences Thanks for any help.
parseInt(‘12:00’) and then try to use math operation
ok ill look into that.
How would I go about outputing the result to a label for the webpage once they enter both values?
thanks!
you need to place a element named ‘ID’ in advance, then
document.getElementById(‘ID’).innerHTML = xxxx
ahh, much thanks!
hmm, what am I doing wrong here?
<script type="text/javascript">
function calculate_time() {
var hour_start = document.getElementById(parseInt('hour_start'));
var hour_end = document.getElementById(parseInt('hour_end'));
var hour_total = hour_end - hour_start;
document.getElementById('hour_total').innerHTML = hour_total;
}
</script>
</head>
<body>
<form name =“calculate” action=“#”>
<div>
<p>Start Hour: </label><input type=“text” name=“hour_start” id=“hour_start” /></p>
<p>End Hour: </label><input type=“text” name=“hour_end” id=“hour_end” /></p>
<p><label for=“hour_totals” id=“hour_total”></label></p>
<p><input type=“button” name=“submit” value=“Calculate Time” onclick=“calculate_time()” /></p>
</div>
</form>
it just outputs 0 lol
This would be more accurate:
var hour_start = parseInt(document.getElementById('hour_start').value);
You want to get the value of the field first {document.getElementById(‘hour_start’).value} and then parse it as an integer. Remember, when it comes to javascript, any nested functions or methods take place before their enclosing functions or methods, so work from the innermost parentheses outward.
Hope this helps. 
I was going to leave off mention of the two missing <label> tags in your code, but decided to mention it anyway. So… er… You’re missing two label tags in your code… 
Thank you so much!
It now works…
Does anyone have a working example of this yet? I would be interested as well on knowing how t is would be developed Sounds like basic math with variables as the time. I believe if you want your label to have a number you would have to get the element by the ID. (Not sure)
Ok, it is working… sort of lol
Here is what I have now:
<script language="javascript" type="text/javascript">
<!--
function calculate_time(hour_start, hour_end) {
var hour_start = parseInt(document.getElementById('hour_start').value);
var hour_end = parseInt(document.getElementById('hour_end').value);
var hour_total = hour_end - hour_start;
document.getElementById('hour_total').innerHTML = hour_total
}
// -->
</script>
</head>
<body>
<form name ="calculate" action="#">
<div>
<p><label for="hour_start">Start Hour: </label><input type="text" name="hour_start" id="hour_start" /></p>
<p><label for="hour_end">End Hour: </label><input type="text" name="hour_end" id="hour_end" /></p>
<p><label for="hour_totals" id="hour_total"></label></p>
<p><input type="button" value="Calculate Time" onclick="calculate_time(this.form.hour_start.value, this.form.hour_end.value)" /></p>
</div>
</form>
</body>
</html>
The output number is semi correct, if I put 4:00 and 6:00 it gives -2…
How can I keep the time format so its 2:00 as the result (I will be using military time aka 15:00 for 3:00PM etc…)
thanks for the help eveyone!
Military time is hhmm whereas 24-hour time is hh:mm
A suitable way to accept either 2 or 2:00 is to add the :00 part if needed.
Then we can take the hour:minutes and create a date from them.
hour_start += Number(hour_start) ? ':00' : '';
hour_end += Number(hour_end) ? ':00' : '';
startTime = new Date('1-1-1 ' + hour_start);
endTime = new Date('1-1-1 ' + hour_end);
var difference = endTime - startTime;
The Date object is represented in milliseconds, so allows us to easily work out the time difference.
Then we convert the time difference from milliseconds to minutes, and work out the number of hours and minutes
difference /= 1000 * 60; // convert to minutes
var hours = Math.floor(difference / 60);
var mins = Math.floor(difference % 60);
document.getElementById('hour_total').innerHTML = showTime(hours, mins);
Displaying the time means adding an optional 0 to the hour and the minute, so we’ll use a separate function for that.
function showTime(hours, minutes) {
return ((hours < 10) ? '0' : '') + hours +
':' +
((minutes < 10) ? '0' : '') + minutes;
}
This example code also moves the onclick event out of the HTML code and into where it should be as a part of the scripting behaviour.
The form should not have a name attribute. It has meaning on elements within the form, but on the form itself it has no impact on how the form is used. Instead, an identifier has been used on the form as is advised by best practice.
Additionally, implicit label association means that most of the identifiers within the form are able to be tidied up.
Here is the full code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Time difference</title>
</head>
<body>
<form id="calculate" action="">
<div>
<p><label>Start Hour: <input type="text" name="hour_start" /></label></p>
<p><label>End Hour: <input type="text" name="hour_end" /></label></p>
<p id="hour_total"></p>
<p><input id="calculate_time" type="button" value="Calculate Time" /></p>
</div>
</form>
<script language="javascript" type="text/javascript">
function showTime(hours, minutes) {
return ((hours < 10) ? '0' : '') + hours +
':' +
((minutes < 10) ? '0' : '') + minutes;
}
function calculate_time(hour_start, hour_end) {
startTime = new Date('1-1-1 ' + hour_start);
endTime = new Date('1-1-1 ' + hour_end);
var difference = endTime - startTime;
difference /= 1000 * 60; // convert to minutes
var hours = Math.floor(difference / 60);
var mins = Math.floor(difference % 60);
document.getElementById('hour_total').innerHTML = showTime(hours, mins);
}
document.getElementById('calculate_time').onclick = function () {
var start = this.form.elements.hour_start.value;
var end = this.form.elements.hour_end.value;
calculate_time(start, end);
};
</script>
</body>
</html>
wow… thank you so much, works great!
Can I bother you for one more thing? Is it possible to use onblur for the End Hour, so after they leave that field it runs the code instead of click the submit button? I tried adding onblur and changing some code, but it kept giving me NaN:NaN lol
This is the part that needs to be updated:
document.getElementById('calculate_time').onclick = function () {
...
};
Because we are wanting more than one event to call the function, so the first update is to make it a named function and attach it to each event.
The second update involves attaching it to the blur event of the end hour element.
Here is the updated code:
function calculateTimeEvent() {
...
};
var form = document.getElementById('calculate');
var endHour = form.elements.hour_end;
var calculateButton = document.getElementById('calculate_time');
endHour.onblur = calculateTimeEvent;
calculateButton.onclick = calculateTimeEvent;