How to return value from function to html element.
Below is the sample code:
$.fn.countdown = function(toTime){
var x = setInterval(function(){
var now = new Date().getTime();
var distance = toTime - now;
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 value = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
console.log(value);
return value;
}, 1000);
};
$('#my_div').countdown(new Date("Jan 5, 2024 15:37:25").getTime());<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>I need the result value from that function print to #my_div.
>Solution :
The issue is because your return statement is inside the setInterval() handler and is therefore not returned from the $.fn.countdown invocation.
You instead need to reference the element which your jQuery extension library was instantiated on, using the this keyword, and then update that element. In the example below I used the text() method.
$.fn.countdown = function(toTime) {
let $el = $(this);
let timeUpdate = () => {
var now = new Date().getTime();
var distance = toTime - now;
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 value = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
$el.text(value);
}
timeUpdate(); // run on instantiation
var intervalId = setInterval(timeUpdate, 1000); // run every second
};
$('#my_div').countdown(new Date("Jan 5, 2024 15:37:25").getTime());<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my_div"></div>