2

Estoy intentado mostrar la hora en tiempo real dentro de un <p>, pero aunque la consola de Firefox no me muestra error, la hora no aparece. Este es el código actual:

<p id="display-time">
    <script>
        function myFunc() {
            var now = new Date();
            var time = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
            return time;
        }
        myFunc();
        setInterval(myFunc, 1000);
    </script>
</p>

He probado varias combinaciones, como incluir document.write(), pero me decía que está undefined.

¿En qué podría estar fallando?

3 respuestas 3

6

Pues si, tienes todo correcto, sin embargo a tu script le falta enviar la data al DOM.

Tienes algunas alternativas, yo usaré innerHTML.

Cuando ejecutas setInterval(), le dices que la función myFunc() se ejecute cada 1 segundo. Pero la función myFunc() si bien calcula el tiempo y lo pone en una variable time, la retorna a setInterval y no sucede nada. En vez de retornar el valor de time, lo que debes hacer es enviarlo al DOM. Para eso puedes usar la propiedad innerHTML del elemento <p>, la cual seteas de la siguiente forma:

document.getElementById('display-time').innerHTML = time;

Dicho esto, tu código puede quedar así:

<p id="display-time">
<script>
    function myFunc()  {
        var now = new Date();
        var time = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
        document.getElementById('display-time').innerHTML = time;
    }
    setInterval(myFunc, 1000);
</script>
</p>

Espero que esto aclare tu duda.

5

Es problema es que no debes hacer un return en tu función, sino signar el valor al elemento correspondiente.

function myFunc()  {
	var now = new Date();
	var time = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
	document.getElementById('display-time').innerHTML= time;
}
myFunc();
setInterval(myFunc, 1000);
HORA: 
<p id="display-time">

</p>

No hace falta que añadas el javascript dentro del elemento HTML, esto puede llevar a confusión, es mejor acostumbrarse a poner en una parte el HTML y en otra el javascript. Para manipular elementos desde javascript es necesario esperar a que el DOM los tenga cargados.

1
  • ¡Solucionado! Gracias, tenía dudas con lo del return.
    – Vinyet
    el 12 abr. 2019 a las 9:10
2

function myFunc() {
    var now = new Date();
    var time = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
    document.getElementById('display-time').innerHTML = time;
}

setInterval(myFunc, 1000);
<p id="display-time"></p>

Creo que buscabas algo como esto.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.