Develop Reference

jQuery/Javascript function can't print/echo the return value into element

I have jQuery function timer.
(function( $ ){
$.fn.makeTimer = function(val){
var val = val;
setInterval(function() {
var result;
var startTime = new Date(val);
startTime = (Date.parse(startTime) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var timePassed = now - startTime;
var years = Math.floor(timePassed / (86400 * 365));
var months = Math.floor((timePassed / (86400 * 30.41)) - (years * 12));
var days = Math.floor((timePassed / 86400) - (years * 365) - (months * 30.41));
var hours = Math.floor( (timePassed / 3600 ) - (years * (24 * 365)) - (months * (24 * 30.41)) - (days * 24) ) ;
var minutes = Math.floor( (timePassed / 60) - ( years * (1440 * 365) ) - (months * (1440 * 30.41)) - (days * (60 * 24)) - (hours * 60 ) );
var seconds = Math.floor(timePassed - (years * (86400 * 365)) - (months * (86400 * 30.41)) - (days * 86400) - (hours * 3600) - (minutes * 60) );
if (months < "10") { months = "0" + months; }
if (days < "10") { days = "0" + days; }
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
console.log(hours + ":" + minutes + ":" + seconds);
result = hours + ":" + minutes + ":" + seconds;
return result;
}, 1000);
};
})( jQuery );
$("#timers").makeTimer("07 April 2022 13:00:00 GMT+07:00");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timers"></div>
And I call like this,
$("#timers").makeTimer("07 April 2022 13:00:00 GMT+07:00");
This is the HTML element,
<div id="timers"></div>
After tried to run the code, I can't print/echo the text into $("#timers"), but when I try to console.log(hours + ":" + minutes + ":" + seconds); I can see the value.
What I want, how to return result correctly into this element?

Add at the top of your function:
var $element = this;
Then, after calculating results:
$element.text(result)
If you need all the values:
$element.append(`<br />${result}`)
(function( $ ){
$.fn.makeTimer = function(val){
var val = val;
var $element = this;
setInterval(function() {
var result;
var startTime = new Date(val);
startTime = (Date.parse(startTime) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var timePassed = now - startTime;
var years = Math.floor(timePassed / (86400 * 365));
var months = Math.floor((timePassed / (86400 * 30.41)) - (years * 12));
var days = Math.floor((timePassed / 86400) - (years * 365) - (months * 30.41));
var hours = Math.floor( (timePassed / 3600 ) - (years * (24 * 365)) - (months * (24 * 30.41)) - (days * 24) ) ;
var minutes = Math.floor( (timePassed / 60) - ( years * (1440 * 365) ) - (months * (1440 * 30.41)) - (days * (60 * 24)) - (hours * 60 ) );
var seconds = Math.floor(timePassed - (years * (86400 * 365)) - (months * (86400 * 30.41)) - (days * 86400) - (hours * 3600) - (minutes * 60) );
if (months < "10") { months = "0" + months; }
if (days < "10") { days = "0" + days; }
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
console.log(hours + ":" + minutes + ":" + seconds);
result = hours + ":" + minutes + ":" + seconds;
$element.text(result);
return result;
}, 1000);
};
})( jQuery );
$("#timers").makeTimer("07 April 2022 13:00:00 GMT+07:00");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timers"></div>

Run multiple timers in the same page using javascript

The below code prints the title of many cards and their countdown time.....the problem is that the timer is printed only for the first card. How do i print it for all the cards?I've tried a lot to search it on google but could find a relevant answer.Please help me on how to get timers on each card.
function previewall()
{
$.ajax({
type: "POST",
data: {
},
url: "readall.php",
dataType: "json",
success: function(JSONObject) {
var peopleHTML = "";
for (var key in JSONObject) {
if (JSONObject.hasOwnProperty(key)) {
peopleHTML += "<div class='wrapper'><label>" + JSONObject[key]["title"] + "</label><br>";
peopleHTML += "<p id='demo1'></p><br><p id=demo></p> </div>";
var x = setInterval(function() {
var count =JSONObject[key]["valid_date"];
var dat=JSONObject[key]["started_date"];
var countDownDate = new Date(count).getTime();
var date = new Date(dat).getTime();
// Get todays date and time
var now = new Date().getTime();
var elapsed = now - date;
var distance = countDownDate - now;
var planned= date - 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);
var days1 = Math.floor(elapsed / (1000 * 60 * 60 * 24));
var hours1 = Math.floor((elapsed % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes1 = Math.floor((elapsed % (1000 * 60 * 60)) / (1000 * 60));
var seconds1 = Math.floor((elapsed % (1000 * 60)) / 1000);
var days2 = Math.floor(planned / (1000 * 60 * 60 * 24));
var hours2 = Math.floor((planned % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes2 = Math.floor((planned % (1000 * 60 * 60)) / (1000 * 60));
var seconds2 = Math.floor((planned % (1000 * 60)) / 1000);
if (distance < 0) {
document.getElementById("demo").innerHTML = "EXPIRED";
}
else if(elapsed<0){
document.getElementById("demo1").innerHTML = "Starts in " + days2 + "d " + hours2 + "h " + minutes2 + "m " + seconds2 + "s " ;
}
else
{
document.getElementById("demo1").innerHTML = "Posted <br>" + days1 + "d " + hours1 + "h " + minutes1 + "m " + seconds1 + "s ago" ;
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s Left" ;
}
});
}
}
$("#people").html(peopleHTML);
}
});
}

The problem is that all timers bind the variable key, so when they fire, they see the final value of key.
Try this instead:
for (var k in JSONObject) {
let key = k;
if (JSONObject.hasOwnProperty(key)) {
...

You have multiple elements sharing the same id (i.e. demo, demo1), the resulting page is broken and this is the cause of the issue.
The fastest fix would be keeping a counter and embedding it in the various ids of the elements you create dinamically.
Something like:
var peopleHTML = "";
var i = -1;
for (var key in JSONObject) {
i++;
if (JSONObject.hasOwnProperty(key)) {
peopleHTML += "<div class='wrapper'><label>" + JSONObject[key]["title"] + "</label><br>";
peopleHTML += "<p id='demoOuter'"+i+"></p><br><p id=demoInner"+i+"></p> </div>";
// [CUT]
f (distance < 0) {
document.getElementById("demoInner"+i).innerHTML = "EXPIRED";
}
else if(elapsed<0){
document.getElementById("demoOuter"+i).innerHTML = "Starts in " + days2 + "d " + hours2 + "h " + minutes2 + "m " + seconds2 + "s " ;
}
else
{
document.getElementById("demoOuter"+i).innerHTML = "Posted <br>" + days1 + "d " + hours1 + "h " + minutes1 + "m " + seconds1 + "s ago" ;
document.getElementById("demoInner"+i).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s Left" ;
}

Javascript implementing multiple countdown timers in a table

I have tried to create multiple countdown timers in a table that will rely on variables to set its time left. Currently there are no results output to the page and I'm not sure why.
Ideally, this should display 4 countdown timers
var table;
table = ("<table>");
for (i = 0; i < 4; i++) {
table += ("<tr>");
table += ("<td> Time Left : </td>");
table += ("<td><div id=\"dday" + i + "\"></div></td>");
table += ("<td><div id=\"dhour" + i + "\"></div></td>");
table += ("<td><div id=\"dmin" + i + "\"></div></td>");
table += ("<td><div id=\"dsec" + i + "\"></div></td>");
table += ("</tr>");
}
table += ("</table>");
document.getElementById('listinglist').innerHTML = table;
var yr = 2016,
m = 2,
d = 3,
hr = 4,
min = 5;
for (i = 0; i < 4; i++) {
countdown(yr, m, d, hr, min, i);
}
var year = 2010;
var month = 12;
var day = 21;
var hour = 18;
var minute = 38;
var tz = -5;
var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
function countdown(yr, m, d, hr, min) {
theyear = yr;
themonth = m;
theday = d;
thehour = hr;
theminute = min;
var today = new Date();
var todayy = today.getYear();
if (todayy < 1000) {
todayy += 1900;
}
var todaym = today.getMonth();
var todayd = today.getDate();
var todayh = today.getHours();
var todaymin = today.getMinutes();
var todaysec = today.getSeconds();
var todaystring1 = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec;
var todaystring = Date.parse(todaystring1) + (tz * 1000 * 60 * 60);
var futurestring1 = (montharray[m - 1] + " " + d + ", " + yr + " " + hr + ":" + min);
var futurestring = Date.parse(futurestring1) - (today.getTimezoneOffset() * (1000 * 60));
var dd = futurestring - todaystring;
var dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1);
var dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
var dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
var dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);
document.getElementById('dday').innerHTML = dday;
document.getElementById('dhour').innerHTML = dhour;
document.getElementById('dmin').innerHTML = dmin;
document.getElementById('dsec').innerHTML = dsec;
setTimeout("countdown(theyear,themonth,theday,thehour,theminute)", 1000);
}
<div id="listinglist"></div>

There are few problems in your script, like you are calling the count down function before the montharray is created, you are not using the i part in getElementById etc
var table;
table = ("<table>");
for (i = 0; i < 4; i++) {
table += ("<tr>");
table += ("<td> Time Left : </td>");
table += ("<td><div id=\"dday" + i + "\"></div></td>");
table += ("<td><div id=\"dhour" + i + "\"></div></td>");
table += ("<td><div id=\"dmin" + i + "\"></div></td>");
table += ("<td><div id=\"dsec" + i + "\"></div></td>");
table += ("</tr>");
}
table += ("</table>");
document.getElementById('listinglist').innerHTML = table;
var yr = 2016,
m = 2,
d = 3,
hr = 4,
min = 5;
var year = 2010;
var month = 12;
var day = 21;
var hour = 18;
var minute = 38;
var tz = -5;
var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
//should be called after setting the montharray
for (i = 0; i < 4; i++) {
countdown(yr, m, d, hr, min, i);
}
function countdown(yr, m, d, hr, min, i) {
theyear = yr;
themonth = m;
theday = d;
thehour = hr;
theminute = min;
var today = new Date();
var todayy = today.getYear();
if (todayy < 1000) {
todayy += 1900;
}
var todaym = today.getMonth();
var todayd = today.getDate();
var todayh = today.getHours();
var todaymin = today.getMinutes();
var todaysec = today.getSeconds();
var todaystring1 = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec;
var todaystring = Date.parse(todaystring1) + (tz * 1000 * 60 * 60);
var futurestring1 = (montharray[m - 1] + " " + d + ", " + yr + " " + hr + ":" + min);
var futurestring = Date.parse(futurestring1) - (today.getTimezoneOffset() * (1000 * 60));
var dd = futurestring - todaystring;
var dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1);
var dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
var dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
var dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);
//need to target the elements using i in the id
document.getElementById('dday' + i).innerHTML = dday;
document.getElementById('dhour' + i).innerHTML = dhour;
document.getElementById('dmin' + i).innerHTML = dmin;
document.getElementById('dsec' + i).innerHTML = dsec;
//need to pass the parameter as passed to this function
setTimeout(countdown.bind(this, yr, m, d, hr, min, i), 1000);
}
<div id="listinglist"></div>

javascript year month day calculation differ

im having problem to calculate year month day in a same application but different page.
the 1st page display the date as 12Month(s) 5Day(s), while another page showing 1Year(s) 0Month(s) 1Day(s). how can this situation be explain?
<script type="text/javascript">
function myfunc(sDate1, sDate2) { //yyyy-MM-dd
var aDate, oDate1, oDate2, iDays;
aDate = sDate1.split('-');
oDate1 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]);
aDate = sDate2.split("-");
oDate2 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]);
iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);
if (iDays <= 30) {
alert(iDays);
} else if (iDays > 30 && iDays <= 365) {
alert("Duration:" + parseInt((iDays / 30)) + "month(s) " + parseInt((iDays % 30)) + "day(s)")
} else {
alert("Duration:" + parseInt((iDays / 365)) + "year(s) " + parseInt(((iDays % 365) / 30)) + "month(s) " + parseInt(((iDays % 365) % 30)) + "day(s)");
}
return iDays;
}
</script>
My test code
Page1:
if (iDays <= 30)
$("#Display1").html(iDays + " day(s)");
else if (iDays > 30 && iDays <= 365)
$("#Display1").html(parseInt(iDays / 30) + " month(s) " + (iDays % 30) + " day(s)");
else if (iDays > 365)
$("#Display1").html(parseInt(iDays / 365) + " year(s) " + parseInt((iDays % 365) / 30) + " month(s) " + ((iDays % 365) % 30) + " day(s)");
Page2:
if (iDays <= 30)
$("#Display2").html(iDays + " day(s)");
else if (iDays > 30 && iDays <= 365)
$("#Display2").html(parseInt(iDays / 30) + " month(s) " + (iDays % 30) + " day(s)");
else if (iDays > 365)
$("#Display2").html(parseInt(iDays / 365) + " year(s) " + parseInt((iDays % 365) / 30) + " month(s) " + ((iDays % 365) % 30) + " day(s)");

Here is the code from the MSDN. I think the problem come from iDays
// Set the unit values in milliseconds.
var msecPerMinute = 1000 * 60;
var msecPerHour = msecPerMinute * 60;
var msecPerDay = msecPerHour * 24;
// Set a date and get the milliseconds
var date = new Date('6/15/1990');
var dateMsec = date.getTime();
// Set the date to January 1, at midnight, of the specified year.
date.setMonth(0);
date.setDate(1);
date.setHours(0, 0, 0, 0);
// Get the difference in milliseconds.
var interval = dateMsec - date.getTime();
// Calculate how many days the interval contains. Subtract that
// many days from the interval to determine the remainder.
var days = Math.floor(interval / msecPerDay );
interval = interval - (days * msecPerDay );
// Calculate the hours, minutes, and seconds.
var hours = Math.floor(interval / msecPerHour );
interval = interval - (hours * msecPerHour );
var minutes = Math.floor(interval / msecPerMinute );
interval = interval - (minutes * msecPerMinute );
var seconds = Math.floor(interval / 1000 );
// Display the result.
document.write(days + " days, " + hours + " hours, " + minutes + " minutes, " + seconds + " seconds.");
//Output: 164 days, 23 hours, 0 minutes, 0 seconds.
Try to calculate it with this method for the days
This will look like this
<script type="text/javascript">
function myfunc(sDate1, sDate2) { //yyyy-MM-dd
var aDate, oDate1, oDate2, iDays;
// Set the unit values in milliseconds.
var msecPerMinute = 1000 * 60;
var msecPerHour = msecPerMinute * 60;
var msecPerDay = msecPerHour * 24;
aDate = sDate1.split('-');
oDate1 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]);
aDate = sDate2.split("-");
oDate2 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]);
var interval = oDate2.getTime() - oDate1.getTime();
iDays = Math.floor(interval / msecPerDay );
if(iDays <=30){
alert(oDate1);
}else if(iDays>30 && iDays <=365){
alert("Duration:" + parseInt((iDays/30)) + "month(s) " + parseInt((iDays%30)) + "day(s)")
}else{
alert("Duration:" + parseInt((iDays/365)) + "year(s) " + parseInt(((iDays%365)/30)) + "month(s) " + parseInt(((iDays%365)%30)) + "day(s)");
}
return iDays;
}

Setting a custom countdown in javascript

My code is located below. I'm trying to set a countdown, however I can't figure out how to set the timer to operate. I've tried changing the "var setting". When I do it seems that the countdown works, however it glitches and the numbers appear but all go back to "0". Really confused. Someone Please help!
(function($) {
$.fn.countdown = function(options) {
var settings = { 'date': "30 september 2014 16:24:00" };
if(options) {
$.extend(settings, options);
}
this_sel = $(this);
function count_exec() {
eventDate = Date.parse(settings['date']) / 1000; // Parse the date string
currentDate = Math.floor($.now() / 1000); // Find the timestamp for now
seconds = eventDate - currentDate; // Find the number of seconds remaining
if (seconds <= 0) { // After the event date has passed
days = 0;
hours = 0;
minutes = 0;
seconds = 0;
} else {
days = Math.floor(seconds / (60 * 60 * 24)); // Divide to find the number of days remaining
seconds -= days * 60 * 60 * 24; // Subtract the number of (complete, => 24 hours) days calculated above
hours = Math.floor(seconds / (60 * 60)); // Get the number of hours from that modified number ^
seconds -= hours * 60 * 60;
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;
}
this_sel.find('#days').val(days).trigger('change');
this_sel.find('#hours').val(hours).trigger('change');
this_sel.find('#mins').val(minutes).trigger('change');
this_sel.find('#secs').val(seconds).trigger('change');
} // End of count_exec();
count_exec();
interval = setInterval(count_exec, 1000);
} // End of the main function
}) (jQuery);

Please but below code in your file and apply the desire date. It works fine for me. Let me know if any issue.
<body>
<form name="count">
<input type="text" size="69" name="count2">
</form>
<script type="text/javascript">
//change the text below to reflect your own,
var before = "Christmas!"
var current = "Today is Christmas. Merry Christmas!"
var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
function countdown(yr, m, d) {
theyear = yr; themonth = m; theday = d
var today = new Date()
var todayy = today.getYear()
if (todayy < 1000)
todayy += 1900
var todaym = today.getMonth()
var todayd = today.getDate()
var todayh = today.getHours()
var todaymin = today.getMinutes()
var todaysec = today.getSeconds()
var todaystring = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec
futurestring = montharray[m - 1] + " " + d + ", " + yr
dd = Date.parse(futurestring) - Date.parse(todaystring)
dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1)
dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1)
dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1)
dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1)
if (dday == 0 && dhour == 0 && dmin == 0 && dsec == 1) {
document.forms.count.count2.value = current
return
}
else
document.forms.count.count2.value = "Only " + dday + " days, " + dhour + " hours, " + dmin + " minutes, and " + dsec + " seconds left until " + before
setTimeout("countdown(theyear,themonth,theday)", 1000)
}
//enter the Future count down date using the format year/month/day
countdown(2016, 9, 24)
</script>
</body>