Estoy intentando colocar un reloj con Javascript y obtengo el error:
Uncaught RangeError: Maximum call stack size exceeded
Se marca en la línea en que se declara la función: function setClock(element_id)
Este es el código simplificado:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
* {
text-align: center;
}
.content {
margin: 3% 9%;
}
.time-box span {
display: inline-block;
}
</style>
</head>
<body>
<div class="content">
<div class="time-box">
<span>Hora: <span id="actual-time"></span></span>
</div>
</div>
<script>
function setClock(element_id)
{
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const now = hours + ':' + minutes + ':' + seconds;
document.getElementById(element_id).innerText = now;
setTimeout(setClock(element_id), 1000);
}
setClock('actual-time');
</script>
</body>
</html>
Editado
Otra prueba (sin errores) pero que no actualiza el tiempo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
* {
text-align: center;
}
.content {
margin: 3% 9%;
}
.time-box span {
display: inline-block;
}
</style>
</head>
<body>
<div class="content">
<div class="time-box">
<span>Hora: <span id="actual-time"></span></span>
</div>
</div>
<script>
function setClock(element_id)
{
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const now = hours + ':' + minutes + ':' + seconds;
document.getElementById(element_id).innerText = now;
}
window.onload = function () {
setInterval(setClock('actual-time'), 1000);
}
</script>
</body>
</html>
Este último caso no funciona si le indico la id del elemento el la llamada a la función.