works fine by itself, but blows-up when I put it in the rest of my form

StackOverflow https://stackoverflow.com/questions/17505413

Question

I've hacked away at a stopwatch script to make it useable in several iterations in my HTML form. It uses the id tag to identify which button I pressed to start, end, and reset the timer, post the current time to these fields and runs a stopwatch in a 3rd field. The reason for this is that start/end/duration times will be tracked on 12 vital manufacturing processes via the form.

I've written this in the context of a 'stand-alone' HTML file in order to test the viability and it works just fine... however... when I paste the code into my form (which is seriously too large to post here) and hit the "start" button - I get text posted to my "stopwatch" field and then my page refreshes.

Below is as much of the text that is posting to my field that I can read (if necessary I'll expand the field to capture more of the text) and HTML with the javascript code that I've written.

Posted text: function hour(serial_number){if(!isFinite(serial_number))return ....

code I've put together:

<html>
<head>
<script type="text/javascript">

var sec = 0;
var mins = 0;
var hour = 0;

function duration(ctrlID){
  ctrlbtnID=(ctrlID)
  var cbtnVal=document.getElementById(ctrlbtnID).value;

  if(cbtnVal=='Begin'){
    document.getElementById(ctrlbtnID).value='End';
    var currentTime = new Date()
    var hours = currentTime.getHours()
    var minutes = currentTime.getMinutes()
    var seconds = currentTime.getSeconds()

    if (minutes < 10) {minutes = "0" + minutes}
    if (seconds < 10) {seconds = "0" + seconds}
    bTime= hours + ":" + minutes + ":" + seconds + " "
    document.getElementById(ctrlbtnID+"Start").value = bTime
  }  //end of if block
  else if(cbtnVal=='End'){
    document.getElementById(ctrlbtnID).value='Begin';
    var currentTime = new Date()
    var hours = currentTime.getHours()
    var minutes = currentTime.getMinutes()
    var seconds = currentTime.getSeconds()

    if (minutes < 10) {minutes = "0" + minutes}
    if (seconds < 10) {seconds = "0" + seconds}
    eTime= hours + ":" + minutes + ":" + seconds + " "
    document.getElementById(ctrlbtnID+"End").value = eTime
  }
  stopwatch();
}
function stopwatch(){
  var x=document.getElementById(ctrlbtnID).value;
  if (x=='End'){
    sec++;
  if (sec == 60) {
    sec = 0;
    mins = mins + 1;
  }
  else {
   mins = mins;
  }  
  if (mins == 60) {
    mins = 0;
    hour += 1;
  }
  if (sec<=9) {
    sec = "0" + sec;
  }
  var swTime=document.getElementById(ctrlbtnID+"Dur");

  swTime.value= ((hour<=9) ? "0"+hour : hour) + " : " + ((mins<=9) ? "0" + mins : mins) + " : " + sec;
  SD=window.setTimeout("stopwatch();", 1000);
  }
}
function reset(){
  var swTime=document.getElementById(ctrlbtnID+"Dur");
  sec = 0;
  mins = 0;
  hour = 0;
  swTime.value='00 : 00 : 00';
  document.getElementById(ctrlbtnID+"Start").value ='00 : 00 : 00';
  document.getElementById(ctrlbtnID+"End").value ='00 : 00 : 00';
}
</script>
</head> 
<body>
<input type="button" value="Begin" id="1_1"  onClick="duration(this.id)"/>
<input type="button" value="Reset" id="reset"  onClick="reset()"/>
<input type="text" value="00 : 00 : 00" id="1_1Dur"/>
<input type="text" value="00 : 00 : 00" id="1_1Start"/>
<input type="text" value="00 : 00 : 00" id="1_1End"/>
</body>
</html>

I've posted my first question on here a few days ago - and I've figured out my own issue - but I'm hoping I'll get a better response to this one... I've dug through all of the online resources I could find for about 2 days now and haven't been able to find anything.

Please - I could use some assistance.

Thanks

Was it helpful?

Solution

Clearly, you have an hour(serial_number) function somewhere, overriding your global hour variable. So please rename either the function or the variable.

As for the 'reset()' function, please tell us if it is called at all, or if it throws an error, and which one.

OTHER TIPS

Well, I don't think we can help you much here without at least some portion of the problematic form. I can confirm that the code works as a stand alone HTML file, but I don't know where the printed text is coming from (it's not found anywhere in the code you provided).

Check your document.getElementById(problemFormId) calls...you may be setting the field to a text variable yourself without realizing it.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top