We Keep Coding

setInterval not updating html element

Basically I'm trying to have my code update the value of an element every second. Problem is my current code only updates it the first time. No errors in console either.
The weird part is that the console.log() keeps running after but the element doesn't update and neither does the time variable
var today = new Date();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var date = today.getFullYear() + '/' + String(today.getMonth() + 1).padStart(2, '0') + '/' + String(today.getDate()).padStart(2, '0');
setInterval(function() {
time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var elTime = document.getElementById("time");
elTime.textContent = time;
console.log(time);
}, 1000);

Try this way, the variables also need to be updated each time the setInterval is executed.
(function() {
setInterval(function() {
var today = new Date();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var date = today.getFullYear() + '/' + String(today.getMonth() + 1).padStart(2, '0') + '/' + String(today.getDate()).padStart(2, '0');
time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var elTime = document.getElementById("time");
elTime.textContent = time;
console.log(time);
}, 1000);
})()
<div id="time"></div>

You need to re-set "Today" for every tick of the interval. Change to this:
setInterval(function(){
var heute= new Date();
time = heute.getHours() + ":" + heute.getMinutes() + ":" + heute.getSeconds();
var elTime = document.getElementById("time");
elTime.textContent = time;
console.log(time);
}, 1000);

A simple working setInterval program looks like the following.
setInterval(() => {
var elTime = document.getElementById("time");
elTime.textContent = parseInt(elTime.textContent) + 1;
}, 1000);
<div id="time">0</div>
Notice all the code that needs execute is inside the scope of the setInterval function. To fix your problem, add all code inside the scope of the function so it runs every single time like so.
setInterval(function() {
//Variables
var today = new Date();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var date = today.getFullYear() + '/' + String(today.getMonth() + 1).padStart(2, '0') + '/' + String(today.getDate()).padStart(2, '0');
time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var elTime = document.getElementById("time");
elTime.textContent = time;
console.log(time);
}, 1000);
<div id="time"></div>

SetInterval is a function call system.
for information: SetInterval can not serve as a precise clock, the durrée between each apple is an indication for the interpreter, and depending on the tasks it must perform elsewhere, it can return beyond the requested period, which is usually the case. For a request of 1000ms, it can realize the call after 1004ms, 1020ms, or even more.
and more easy to use native JS time formating => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
const elTime = document.getElementById("time")
ShowTime() // first attempt
setInterval(ShowTime, 1000) // next ones
function ShowTime()
{
let t_Now = new Date()
elTime.textContent = t_Now.toLocaleTimeString('default', { hour12:false } )
}
<p id="time"></p>

JavaScript is appending to a Div tag but with some strange behaviour

I have a script that for every click of the button takes the time, applies #gmail.com to the end and appends it to a defined div tag.
where the problem lies is that every time i hit the button, the first line changes to the current time, an additional line is appended each time with the correct details and they don't update it is just the first line.
can someone suggest a way to stop the first line from updating each time?
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
var j = document.getElementById("demo").innerHTML = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
$(document).ready(function() {
$("button").click(function() {
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
$("#demo").append(j);
});
});
return j;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
<button onclick="Time()">Generate</button>
<div id="demo"></div>
What I expect to happen each time i press the button is for it to append the following:
2591695115#gmail.com
2591695116#gmail.com
2591695117#gmail.com
2591695118#gmail.com
...etc

You are calling Time() onclick in your HTML. You do not need to say $("button").click again in your jquery.
Also, you do not need document.getElementById("demo").innerHTML when assiging the string to var j.
See the following code:
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
$("#demo").append(j);
return j;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
<button onclick="Time()">Generate</button>
<div id="demo"></div>

You just need to append the result from Time function.
$(document).ready(function () {
$("button").click(function () {
$("#demo").append(Time());
});
});
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
return j;
}

This should work. The problem was the structure of your function. I took the button click outside of the Time() function and also changed var j to only declare the time instead of also already adding it to the HTML.
Also, by declaring var j after your if statements the date now displays correctly.
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
$("#demo").append(j);
}
$("button").click(function() {
Time();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
<button>Generate</button>
<div id="demo"></div>

SetInterval Javascript not working- showing blank

I want to create a clock that will update itself every second.
For some reason when I try to run the code I get a blank page.
this is the Javascript part:
function test()
{
var today = new Date();
var day = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
var hr = today.getHours();
var mins = today.getMinutes();
var sec = today.getSeconds();
document.body.innerHTML = day + "/" + month + "/" + year + " " + hr + ":" + mins + ":" + secs;
}
setInterval(test, 1000);
this is the HTML part:
<html lang="en">
<head>
</head>
<body name="body">
<script type="text/javascript" src="JS-test.js"></script>
</body>
</html>
I've tried a few other variations and none seam to work.
How do I fix it to actually display something?
thanks in advance.
(I am a newbie in javascript)

Change secs to sec
var sec = today.getSeconds();
document.body.innerHTML = day + "/" + month + "/" + year + " " + hr + ":" + mins + ":" + sec;

The script should be written within <script></script>
and secondly, its sec not secs in your last statement of that function.. It works fine.
function test()
{
var today = new Date();
var day = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
var hr = today.getHours();
var mins = today.getMinutes();
var sec = today.getSeconds();
document.body.innerHTML = day + "/" + month + "/" + year + " " + hr + ":" + mins + ":" + sec;
}
setInterval(test, 1000);

Maybe a little change in your function...
document.onload=setInterval(test,1000);
and do the sec/secs change in your variable declaration

JS: Formatting time and date display on website

I have a script that prints the current date and time in JavaScript, but when it prints time, it's missing one 0. Here is the code:
var currentdate = new Date();
var datetime = "0" + currentdate.getDate() + ".0"
+ (currentdate.getMonth()+1) + "."
+ currentdate.getFullYear() + " "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes();
document.write(datetime);
It should print 04.03.2016 15:04 and prints 04.03.2016 15:4.
Two digit minutes print fine.
Any leads?

Try this
var formatDateDigit = function (i) {
return i <= 9 ? ("0" + i) : i;
};
var currentdate = new Date();
var datetime = formatDateDigit(currentdate.getDate()) + "."
+ formatDateDigit(currentdate.getMonth()+1) + "."
+ currentdate.getFullYear() + " "
+ formatDateDigit(currentdate.getHours()) + ":"
+ formatDateDigit(currentdate.getMinutes());
document.getElementById('my_output_here').innerHTML = datetime;
<div id="my_output_here"></div>

displaying current date in a text box - javascript

I am having great difficulty getting the current date to be inputted into a text box within a form i am creating as a default value. at the moment i have the following code, which i believe creates the current date, followed by the text box code which i am unsure on how to modify in order for the date to be displayed inside.
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring();
}
<input type="text" name="frmDateReg" required id="frmDate" value="getDate()">
if anyone could suggest how to create todays date and input it into the textbox as default it would be greatly appreciated. (Please excuse any format issues as i am new to stack overflow) Thanks

You've got the right idea. It's just out of order:
<input type="text" name="frmDateReg" required id="frmDate" value="">
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring;
}
getDate();
Your code is correct, except that adding the function call in the value doesn't do anything. You need something else to trigger the function. The way I have it there, it will execute automatically when the page loads.
Aslo, datestring is not a function. It's just a variable. So you can leave off the ()

Try this Jquery code, this will work
$(document).ready(function () {
var dateNewFormat, onlyDate, today = new Date();
dateNewFormat = today.getFullYear() + '-';
if (today.getMonth().length == 2) {
dateNewFormat += (today.getMonth() + 1);
}
else {
dateNewFormat += '0' + (today.getMonth() + 1);
}
onlyDate = today.getDate();
if (onlyDate.toString().length == 2) {
dateNewFormat += "-" + onlyDate;
}
else {
dateNewFormat += '-0' + onlyDate;
}
$('#mydate').val(dateNewFormat);
});
razor view for this
#Html.TextBoxFor(m => m.StartedDate, new { #id = "mydate", #type = "date", #class = "form-control" })

This simple solution worked out for me. You can show the current date using window.onload function of javascript. See the output.
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
window.onload = function(){
document.getElementById("date").value = datestring;
}
<input type="text" id="date"/ >

<html>
<body onload="myFunction()">
Date: <input type="text" id="demo"/>
<script>
function myFunction() {
document.getElementById('demo').value= Date();
}
</script>
</body>
</html>
Use this code. this will helpful

<input type="text" name="frmDateReg" required id="frmDate" >
<script>
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring; //don't need ()
}
document.getElementById("frmDate").onload = getDate();
</script>

html
<input type="text" id="frmDate"></input>
JavaScript
var date = new Date();
document.getElementById("frmDate").value = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
Jsfiddle Demo

<script TYPE="text/javascript" LANGUAGE=JAVASCRIPT>
var currentDate = new Date();
var date1 = currentDate.getMonth()+1;
var mon = currentDate.getDate();
if (mon<10)
mon="0"+mon
var year = currentDate.getYear();
var hour = currentDate.getHours();
var dn="pm"
if (hour<12)
dn="am"
if (hour>12)
hour=hour-12
if (hour==0)
hour=12
var minute = currentDate.getMinutes();
if (minute < 10){
minute = "0" + minute
}
var second = currentDate.getSeconds();
if (second < 10){
second = "0" + second
}
var today = date1+"/"+mon+"/"+year+" Time: "+hour+":"+minute+":"+second+" "+dn
var filePath = "\\\\servername\\maindirectory\\somedirectory\\filenametopostto.xlsx";
function setDate()
{
f1.tDate.value=today;
}
</script>
Result in your text box is:
5/28/2019 Time: 3:03:01 pm

If you want to show the current date on the input field date
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
// today = yyyy + '/' + mm + '/' + dd;
today = `${yyyy}-${mm}-${dd}`;
document.getElementById('dateto1').value = today;
<div class="col-lg-4">
<label>Date</label>
<input type="date" name="dateto1" id="dateto1" class="form-control">
</div>