Currently, I am facing an issue while implementing a start and stop timer in JavaScript for a list of records. To display all the items, I am using ng-repeat. Each repeated element has a Start/Stop toggle button. The problem arises when there are 4 records - if I click on the start timer button for the 4th record, then the button for the first record also changes to Stop. No matter which button I click, it always toggles the first record's button.
Below is the HTML code snippet:
<ul class="list-group" data-ng-repeat="job in
allAppliedJobsForTimeTracker">
<li class="list-group-item">{{job.title}} Hours : {{job.hours}}
<input type="button" name="btn" id='btn' value="Start" data-ng-
click="startTimeTracker(job)" onclick="to_start()";> </li>
</ul>
And here is the script code:
<script language=javascript>
var h=0;
var m=0;
var s=0;
function to_start(){
switch(document.getElementById('btn').value){
case 'Stop':
window.clearInterval(tm); // Stop the timer
document.getElementById('btn').value='Start';
break;
case 'Start':
tm = window.setInterval('disp()', 1000);
document.getElementById('btn').value='Stop';
break;
}
}
function disp(){
// Format the output by adding 0 if it is single digit //
if(s < 10){var s1='0' + s;}
else{var s1=s;}
if(m < 10){var m1='0' + m;}
else{var m1=m;}
if(h < 10){var h1='0' + h;}
else{var h1=h;}
// Display the output //
var str = h1 + ':' + m1 +':' + s1 ;
document.getElementById('n1').innerHTML=str;
// Calculate the stopwatch //
if(s < 59){
s = s + 1;
} else {
s = 0;
m = m + 1;
if(m == 60){
m = 0;
h = h + 1;
} // end if m == 60
}// end if else s < 59
// end of calculation for next display
}
</script>
I want to change the button only for the clicked record row, not for the first record. Does anyone know how I can achieve this?