We help IT Professionals succeed at work.

A simple time adder

Lis018
Lis018 asked
on
I have to create a simple time adder that adds two times together.  I can get them to add, but they are supposed to be in lowest terms.  For example, if someone enters 10 hours and 20 hours it should be expressed as 1 day and 6 hours.  An hours value should be between 0 and 23 and a minutes value should be between 0 and 59.  An alert box should come up if the value is out of range but accept it and use it to do the calculation.  Here is the code I have so far:

<html>
<head>
     <title>A Simple Time Adder</title>
<script>    
function AddTheFields()
   {
   var number_one = window.document.the_form.field_one.value;
   var number_two = window.document.the_form.field_two.value;
   var number_three = window.document.the_form.field_three.value;
   var number_four = window.document.the_form.field_four.value;
   var number_five = window.document.the_form.field_five.value;
   var number_six = window.document.the_form.field_six.value;
   var add_days = number_one + number_four;
   var add_hours = number_two + number_five;
   var add_minutes = number_three + number_six;
   window.document.the_form.the_result_one.value = add_days;
   window.document.the_form.the_result_two.value = add_hours;
   window.document.the_form.the_result_three.value = add_minutes;
   }
</script>
</head>

<body>
<center><h1>A Simple Time Adder</h1></center>
<form name = "the_form">
<center><input type = "text" name = "field_one" size = 5>:
<input type = "text" name = "field_two" size = 5>:
<input type = "text" name = "field_three" size = 5> </center>
<center><input type = "text" name = "field_four" size = 5>:
<input type = "text" name = "field_five" size = 5>:
<input type = "text" name = "field_six" size = 5></center>
<input type = "button" value = "Add Times" OnClick = "AddTheFields()";>
<center><input type = "text" name = "the_result_one" size = 5>:
<input type = "text" name = "the_result_two" size = 5>:
<input type = "text" name = "the_result_three" size = 5></center>


</body>
</form>
</html>
Comment
Watch Question

Top Expert 2005

Commented:
<html>
<head>
    <title>A Simple Time Adder</title>
<script>
function AddTheFields()
  {
  var number_one = window.document.the_form.field_one.value;
  var number_two = window.document.the_form.field_two.value;
  var number_three = window.document.the_form.field_three.value;
  var number_four = window.document.the_form.field_four.value;
  var number_five = window.document.the_form.field_five.value;
  var number_six = window.document.the_form.field_six.value;
  var add_days = number_one/1 + number_four/1;
  var add_hours = number_two/1 + number_five/1;
  var add_minutes = number_three/1 + number_six/1;

  while(add_minutes>=60)
  {
        add_hours+=1;
        add_minutes-=60;

  }
  while(add_hours>=24)
  {
        add_days+=1;
        add_hours-=24;

  }
  window.document.the_form.the_result_one.value = add_days;
  window.document.the_form.the_result_two.value = add_hours;
  window.document.the_form.the_result_three.value = add_minutes;
  }
</script>
</head>

<body>
<center><h1>A Simple Time Adder</h1></center>
<form name = "the_form">
<center><input type = "text" name = "field_one" size = 5>:
<input type = "text" name = "field_two" size = 5>:
<input type = "text" name = "field_three" size = 5> </center>
<center><input type = "text" name = "field_four" size = 5>:
<input type = "text" name = "field_five" size = 5>:
<input type = "text" name = "field_six" size = 5></center>
<input type = "button" value = "Add Times" OnClick = "AddTheFields()";>
<center><input type = "text" name = "the_result_one" size = 5>:
<input type = "text" name = "the_result_two" size = 5>:
<input type = "text" name = "the_result_three" size = 5></center>


</body>
</form>
</html>

Author

Commented:
Would you happen to know how to get the alert box in there saying that they entered an out of range value but let them keep it there.  Also, do you know how to clear out the result after the answer is computated?
Top Expert 2005

Commented:
<html>
<head>
    <title>A Simple Time Adder</title>
<script>
function AddTheFields()
  {
  var number_one = window.document.the_form.field_one.value;
  var number_two = window.document.the_form.field_two.value;
  var number_three = window.document.the_form.field_three.value;
  var number_four = window.document.the_form.field_four.value;
  var number_five = window.document.the_form.field_five.value;
  var number_six = window.document.the_form.field_six.value;
  var add_days = number_one/1 + number_four/1;
  var add_hours = number_two/1 + number_five/1;
  var add_minutes = number_three/1 + number_six/1;

  while(add_minutes>=60)
  {
        add_hours+=1;
        add_minutes-=60;

  }

  while(add_hours>=24)
  {

        add_days+=1;
        add_hours-=24;

  }
  window.document.the_form.the_result_one.value = add_days;
  window.document.the_form.the_result_two.value = add_hours;
  window.document.the_form.the_result_three.value = add_minutes;
  }

  function checkValue(thisValue,maxValue)
  {
           if(thisValue/1<0 || thisValue/1>maxValue/1)
           {
              alert("Value out of range");
           }

  }
</script>
</head>

<body>
<center><h1>A Simple Time Adder</h1></center>
<form name = "the_form">
<center><input type = "text" name = "field_one" size = 5 onblur="checkValue(this.value,'12')">:
<input type = "text" name = "field_two" size = 5 onblur="checkValue(this.value,'60')">:
<input type = "text" name = "field_three" size = 5 onblur="checkValue(this.value,'60')"> </center>
<center><input type = "text" name = "field_four" onblur="checkValue(this.value,'12')" size = 5>:
<input type = "text" name = "field_five" size = 5 onblur="checkValue(this.value,'60')">:
<input type = "text" name = "field_six" size = 5 onblur="checkValue(this.value,'60')"></center>
<input type = "button" value = "Add Times" OnClick = "AddTheFields()";>
<center><input type = "text" name = "the_result_one" size = 5>:
<input type = "text" name = "the_result_two" size = 5>:
<input type = "text" name = "the_result_three" size = 5>
</center>
<center><input type="button" onclick="document.forms[0].the_result_one.value=''";document.forms[0].the_result_two='';document.forms[0].the_result_three=''" value="Clear result"></center>


</body>
</form>
</html>
Top Expert 2005

Commented:
you should add some more points to your question if you need further assistance :-)

Batalf

Author

Commented:
Thank you for your help Batalf!  It is greatly appreciated.  I think you answered all my questions.
Top Expert 2005

Commented:
Glad I could help.

And remember that this function

checkValue(this.value,'12')">:

has a second argument(12) which is the maximum value you want the user to be able to put into this field.

You could improve the checkValue-function using regular expression but that's another story.

Batalf
Top Expert 2005
Commented:
Comment above

Author

Commented:
Thank you for your help Batalf!  It is greatly appreciated.  I think you answered all my questions.

Author

Commented:
Thanks again.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.