I would appreciate some help with the following.
I have had to set the id for each my countdown timer dynamically for each row of my cards so that each timer has a unique id. I set the IDs through a $each loop and that works fine and tested.
I am trying to find it so I can output the values of the countdown timer.
Before I did it with php. Using the SQL result row id was the id.
$("#timer<?php echo $id; ?>").val(days + "d " + hours + "h "+ minutes + "m " + seconds + "s" ).css("color", "black");
The timer counter display would look like this.
<input id="timer<?php echo $id; ?>" class="timer" type="text" name="" value="" disabled>
The timer counter display looks like this as THEtimer id now set via a $each loop dynamically.
The array ids are used for the timer counter id. eg. "timer3"
<input id="timer" class="timer" type="text" name="" value="" disabled>
I have left the variable like this in a class so you see it working $('.timer')
$('.timer').val(days + "d " + hours + "h "+ minutes + "m " + seconds + "s" ).css("color", "black");
My Problem
How do I fill in the elements $(xxxx).. something like this $("#",timer+id) The # needs to be there.
The snippet
In the snippet, I have left the element as $('.timer') so you see it working.
After page load press the start timer button to start the counter timer. It will alert the Id of the counter before starting the counter.
End game
I want each row to have its own unique countdown timer
$(document).ready(function(){
// simulates jason data result from Ajax
var data = [
{ "id":"1", "name": "Mike" ,"surname": "Rynes" ,"expiredate": "2021/02/25 23:25:00"},
{ "id":"2", "name": "James" ,"surname": "Bond" ,"expiredate": "2021/02/26 23:25:00"},
{ "id":"3", "name": "Harry" ,"surname": "Potter" ,"expiredate": "2021/02/27 23:25:00"},
];
$.each(data, function( i, person ) {
var personDetailCloned = $('.card').first().clone().show();
personDetailCloned.find('.id').text(person.id);
personDetailCloned.find('.name').text(person.name);
personDetailCloned.find('.surname').text(person.surname);
personDetailCloned.find('.expiredate').val(person.expiredate);
//Generate a random number to be used for timer id
var timerid = Math.floor(Math.random() * 100);
personDetailCloned.find('.timer').attr("id","timer"+person.id);
$('.card-container').append(personDetailCloned);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="album py-1">
<div class="container bg-light">
<div class="row py-2">
<div class="col-md-3 card-container" >
<div class="card mb-3 shadow-sm" style="display:none;">
<div class="hover-container">
</div>
<div class="card-body CarDetail">
<p class="card-text font-weight-bold">ID:
<span class="id"></span>
</p>
<p class="card-text font-weight-bold">Name:
<span class="name"></span>
</p>
<p class="card-text font-weight-bold">Surname:
<span class=" surname"></span>
</p>
<div class="d-flex justify-content-between align-items-center">
<p class="font-weight-bold ">Registration:
<span class="font-weight-plain"></span>
<span class="registration"></span> <span>Expires:
<input type="text" class="timer" id="timer" value=""> </span>
<input type="text" class="expiredate" value="">
</p>
<script>
$(document).ready(function () {
$(document).on('click', '.card .starttimer-btn', function(event){
var expiredate = $(this).closest('.card').find('.expiredate').val();
var id = $(this).closest('.card').find('.timer').attr("id");
alert(id);
//alert(expiredate);
var countDownDate = new Date(expiredate).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
//Output the result in an element with id="demo"
$('.timer').val(days + "d " + hours + "h "+ minutes + "m " + seconds + "s" ).css("color", "black");
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
});
});
</script>
</div>
<p><button class="starttimer-btn" >Start Timer</button> </p>
</div>
</div>
</div>
</div>
</div>
</div>Any help and advice to get me there is very appreciated thank you!
