Automatic start time when a link is clicked

Question

I would like to seek your expertise with regards to the coding below:

this is the layout of my browser, so i divided my page into 2

<FRAMESET rows="5%,*" border=0>
    <FRAME SRC="MENU.HTML"> 
    <FRAMESET rows="50%,*">
        <FRAME SRC="" NAME=1>
        <FRAME SRC="" NAME=2>
    </FRAMESET>
</FRAMSET>

below is the code in which i would like to setup the start time automatic where in it will be the same start time in the label.

<html>
  <head >
 <title>Start and stop</TITLE>

<script type="text/javascript">
  document.getElementById('date').value = Date();
</script>

<script>function getDateString(){
    var myDate = new Date();
    return padDatePart(myDate.getMonth() + 1) + 
        "/" + padDatePart(myDate.getDate()) + 
        "/" + myDate.getFullYear()+ 
        ' ' + padDatePart(myDate.getHours()) + 
        ":" + padDatePart(myDate.getMinutes()) + 
        ":" + padDatePart(myDate.getSeconds());
}

function padDatePart(part){
    return ('0'+part).slice(-2); 
}
</script>


<script>
function clearFields(formName)
{
      var formElements = formName.elements;
      for(var i=0;i<formElements.length;i++)
      {
            var elementType = formElements[i].type;
            if('text' == elementType){
                  formElements[i].value="";
                                formElements[i].disabled = false;
            }
            else if('select-one' == elementType){
                  formElements[i].selectedIndex = 0;
                  formElements[i].disabled = false;
            }
            else if('select-multiple' == elementType)
            {
                  var multiOptions = formElements[i].options;
                  for(var j=0;j<multiOptions.length;j++)
                  {
                        multiOptions[j].selected = false;
                  }
            }
      }
}
</script>

  </head>
  <form>
  <body BGCOLOR=#FFFF99 SCROLL=NO>
<CENTER>


<table border=0>
<tr>
<td align=center>
 <input onclick="this.form.StartTime.value = getDateString();" type="button" class=button value="   START   " > 
</td>

<td align=center>
 <input onclick="this.form.StopTime.value =getDateString();" type="button" class=button value="    STOP    ">
</td>
<TD COLSPAN=2 ALIGN=CENTER>
  <input type="reset"  class=button value="   CLEAR   ">
</TD>
</tr>
</table>
<table>
 <TR>
  <TD colspan=2 align=center>
   <input type="text" name="StartTime" size="17" id="date" class=select disabled="disabled">
   | <label id="minutes">00</label>:<label id="seconds">00</label> |
        <script type="text/javascript">
             var minutesLabel = document.getElementById("minutes");
             var secondsLabel = document.getElementById("seconds");
             var totalSeconds = 0;
             setInterval(setTime, 1000);

            function setTime()
             {
                 ++totalSeconds;
                 secondsLabel.innerHTML = pad(totalSeconds%60);
                 minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));
             }

            function pad(val)
             {
                 var valString = val + "";
                 if(valString.length < 2)
                  {
                      return "0" + valString;
                  }
                 else
                  {
                      return valString;
                  }
             }
        </script>
   <input type="text" name="StopTime" size="17" class=select disabled="disabled">
  </TD>
 </TR>
</table>
  </form>
  </body>
</html>
</br></br></html>

is it possible to have automatic stop as well when i clicked the stop button?

Do you mean, you want to stop the automatic timer when the 'stop' button is clicked? — Roddy of the Frozen Peas, Mar 11 '17 at 20:15
both the start time and stop time will be automatic. the start/stop time will start/stop will be displayed in the text box. Start Time will be automatic once i clicked the Convo1 and will be different start time when I clicked the Convo2. and then I will stop time will be automatic once i clicked the stop(well basically that will serve as SAVE button) — Red Paje, Mar 11 '17 at 20:20
@mureinik apology it is not my intention to yell but i prefer to have a capital to specify something in the title bar of a certain browser. just for the sake of emphasizing. — Red Paje, Mar 11 '17 at 20:23
You can start by wrapping `document.getElementById('date').value = Date();` in `window.onload=function() {....}` - as you can see is there an error in your code from the start — mplungjan, Mar 11 '17 at 20:23
I dont have any error inthe start time... I Just need to clicked the start first before time will be displayed in the start time text box. same with the stop time. — Red Paje, Mar 11 '17 at 20:27
Yes you did in the code you pasted. When I clicked run snippet, an error occurred. See my answer why — mplungjan, Mar 11 '17 at 20:30
I saw that... but im just using a notepad and dont have the tools to do the coding... notepad is all I know to code. I dont see the error but the code i have is working. — Red Paje, Mar 11 '17 at 20:35

score -1 · Accepted Answer · answered Mar 11 '17 at 20:29

Move the stuff that needs to be set after the page has rendered to an onload
make sure the table is wrapped in correct form tags

function pad(part) {
  return ('0' + part).slice(-2);
}

function getDateString() {
  var myDate = new Date();
  return pad(myDate.getMonth() + 1) +
    "/" + pad(myDate.getDate()) +
    "/" + myDate.getFullYear() +
    ' ' + pad(myDate.getHours()) +
    ":" + pad(myDate.getMinutes()) +
    ":" + pad(myDate.getSeconds());
}


function clearFields(formName) {
  var formElements = formName.elements;
  for (var i = 0; i < formElements.length; i++) {
    var elementType = formElements[i].type;
    if ('text' == elementType) {
      formElements[i].value = "";
      formElements[i].disabled = false;
    } else if ('select-one' == elementType) {
      formElements[i].selectedIndex = 0;
      formElements[i].disabled = false;
    } else if ('select-multiple' == elementType) {
      var multiOptions = formElements[i].options;
      for (var j = 0; j < multiOptions.length; j++) {
        multiOptions[j].selected = false;
      }
    }
  }
}

function setTime() {
  ++totalSeconds;
  secondsLabel.innerHTML = pad(totalSeconds % 60);
  minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}



var minutesLabel, secondsLabel, totalSeconds = 0;
window.onload = function() {
  document.getElementById('date').value = Date();
  minutesLabel = document.getElementById("minutes");
  secondsLabel = document.getElementById("seconds");
  setInterval(setTime, 1000);
}

<form>
  <table border=0>
    <tr>
      <td align=center>
        <input onclick="this.form.StartTime.value = getDateString();" type="button" class=button value="   START   ">
      </td>

      <td align=center>
        <input onclick="this.form.StopTime.value =getDateString();" type="button" class=button value="    STOP    ">
      </td>
      <TD COLSPAN=2 ALIGN=CENTER>
        <input type="reset" class=button value="   CLEAR   ">
      </TD>
    </tr>
  </table>
  <table>
    <TR>
      <TD colspan=2 align=center>
        <input type="text" name="StartTime" size="17" id="date" class=select disabled="disabled"> | <label id="minutes">00</label>:<label id="seconds">00</label> |
        <input type="text" name="StopTime" size="17" class=select disabled="disabled">
      </TD>
    </TR>
  </table>
</form>

You can move the onclick code to the window.onload too, change the this.form.StartTime to for example document.querySelector("[name=StartTime]") or give the fields an ID — mplungjan, Mar 11 '17 at 20:35
When i test the code here, it is running. but when i pasted this to notepad. the automatic start time is not working in IE. — Red Paje, Mar 11 '17 at 20:36
got it... it is working. Thank you so much for the help @mplungjan — Red Paje, Mar 11 '17 at 20:40
the date and time format should be mm/dd//yyyy hh:mm:ss. I cant seem to return this value to its original date and time format with my previous code. — Red Paje, Mar 12 '17 at 17:48
I don't quite understand what you mean. Return what to what? — mplungjan, Mar 12 '17 at 18:21
Apology to bother you but i am all set. It is my mistake to missed some code when I transfer the code to the page i am previously used. Thanks by the was for giving time to check this. — Red Paje, Mar 12 '17 at 19:02

Automatic start time when a link is clicked

1 Answers1