html/javascript clock does not appear

Question

html/javascript clock does not appear

Asked 6 years, 4 months ago

Viewed 285 times

2

I’m trying to make a digital clock appear on the screen, but the browser does not return anything.

<!DOCTYPE html>
<html>
<head>
    <title>teste</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        function Relogio{
            var data = new Data();
            var horas = data.getHours();
            var minutos = data.getminutes ();
            var segundos = data.getseconds();
                if (horas <10 ) {
                    horas= "0"+ horas;
                }
                if (minutos <10) {
                    minutos = "0"+ minutos;
                }
                if (segundos <10) {
                    minutos = "0"+segundos;
                }
    document.getElementByid("relogio").innerHTML =horas+":"+minutos+":"+segundos;
        }
    </script>

</head>
<body onload="relogio();">
</body>
</html>

3 answers

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.

by bfavaretto • **64,705** points · Answer 1 · 2018-08-06T21:14:23+00:00

Always open your browser console to see errors! There are several syntax errors in your code:

new Data() instead of new Date().
getElementByid instead of getElementById.
function Relogio{ should be function Relogio(){ - or better still, function relogio() {
getminutes() should be getMinutes().

These errors appear in red on the console. You should even have other errors of the kind, see the comment below, Guilherme Nascimento, the other answers, and review your code! Anyway the open console helps you find all these bugs.

Then there is a logic problem: you try to catch an element with id "relogio", but there is no element with that ID. Switch to document.body and the clock will appear on the screen. In advance, your next challenge will be to make this watch go by itself, because the way you programmed it will always show the page load time.

by Sam • **79,597** points · Answer 2 · 2018-08-06T21:16:29+00:00

Keep in mind that Javascript is case sensitive, that is, differentiates upper and lower case letters: a is different from A. Any character with the marry wrong cause error (syntax, can’t find an object etc.).

Problems encountered:

1. function Relogio{

After the function name should follow the parentheses: function Relogio(){

2. relógio() vs. Relogio()

Note that in the onload of body the function name is all lowercase, and the function name starts with uppercase "R". Either you change one or the other so that both are equal.

3. var data = new Data();

The syntax is incorrect. The correct is Date() (in English).

4. var minutos = data.getminutes ();

A problem of marry. Javascript usually uses the style Camel case when a property or method name is composed: get + minutes = getMinutes.

5. var segundos = data.getseconds();

Same problem as previous item.

6. document.getElementByid("relogio").innerHTML

Another problem of marry that causes syntax error. Remember the camel case? The correct is the id start with a capital "i": document.getElementById.

Only the element where you want to print the watch is missing. By .innerHTML of the code, is supposed to be a div with id #relogio. Insert it into the body:

<div id="relogio"></div>

If you want a timer so that the watch does not become static, use the setInterval() (uninterrupted timer that performs a function in the stipulated millisecond range).

How are you calling the function via onload, in this case, you can put the setInterval() at the end of the function relogio(), in this way:

setInterval(relogio, 1000); // 1000 = 1 segundo

Another important point (for beginners and experienced) is related to indentation code. A well-indented code makes it more readable and makes it much easier to maintain, especially in long codes (learn more at this link).

To study:

Corrected code:

function relogio(){
   var data = new Date();
   var horas = data.getHours();
   var minutos = data.getMinutes ();
   var segundos = data.getSeconds();
   if (horas <10 ) {
      horas= "0"+ horas;
   }
   if (minutos <10) {
      minutos = "0"+ minutos;
   }
   if (segundos <10) {
      minutos = "0"+segundos;
   }
   document.getElementById("relogio").innerHTML =horas+":"+minutos+":"+segundos;
   setInterval(relogio, 1000);
}

<body onload="relogio();">
   <div id="relogio"></div>
</body>

And finally: if you are using HTML5, you do not need to declare type="text/javascript" in the script.

by Roberto Giffone • **356** points · Answer 3 · 2018-08-06T21:15:12+00:00

Adjustments made

Missed them () for Function and put the lowercase r, as it is a best practice Function starting with lowercase letter and you are also calling in the onload with lowercase letter.

Clock()

To create the date object use Date()

var data = new Data(); for var data = new Date();

The name of the 2 functions of the Date object were wrong because javascript is case sensitive

var minutes = date.getminutes(); for var minutes = data.getMinutes();

var seconds = data.getseconds(); for var seconds = date getSeconds();

The name was incorrect because javascript is case sensitive

Document.getElementByid for Document.getElementById

I added the div with the time id to receive the time value.

<div id="relogio"> </div>

It follows code adjusted with what already had.

function relogio(){
  var data = new Date();
  var horas = data.getHours();
  var minutos = data.getMinutes();
  var segundos = data.getSeconds();
  
  if (horas <10 ) {
      horas= "0"+ horas;
  }
  
  if (minutos <10) {
      minutos = "0"+ minutos;
  }
  
  if (segundos <10) {
      minutos = "0"+segundos;
  }
  
  document.getElementById("relogio").innerHTML = horas+":"+minutos+":"+segundos;
}

<!DOCTYPE html>
<html>
<head>
<title>teste</title>
<meta charset="utf-8">
<script type="text/javascript">
    
</script>

</head>
<body onload="relogio();">
 <div id="relogio"> </div>
</body>
</html>

If you want to run every second you must use the setInterval as below.

setInterval(relogio, 1000);

You must insert before the line because it should be inside the script.