Clock html / javascript does not appear

Question

Clock html / javascript does not appear

Navigation

#1 by (8 votes)
#2 by (3 votes)
#3 by (2 votes)

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>

javascript html5

asked by anonymous 06.08.2018 / 23:07

3 answers

How to return values from a List in C # Reverse method returns None

score 8 · Answer 1

Always open your browser's console to see the errors! You have several syntax errors in your code:

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

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

Then there is a logic problem: you try to get an element with "relogio" id, but there is no element with this ID. Change to document.body and the clock will appear on the screen. Going forward, your next challenge will be to make this watch go it alone, because the way you programmed it will always show the loading time of the page.

score 3 · Answer 2

Keep in mind that JavaScript is case sensitive , meaning it is case sensitive: a is different from A . Any character with the wrong case causes error (syntax, does not find an object etc).

Problems encountered:

1. function Relogio{

After the function name, you must follow the parentheses: function Relogio(){

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

Note that in% w / o% of% w /% the function name is all lowercase, and the function name begins with a capital "R". Or you change one or the other so that they are both equal.

3. onload

The syntax is incorrect. The correct one is body .

4. var data = new Data();

A case problem. JavaScript generally uses the camel case style when a property name or method is composed: Date() + var minutos = data.getminutes (); = get .

5. minutes

Same problem as the previous item.

6. getMinutes

Plus a case problem that causes syntax error. Remember var segundos = data.getseconds(); ? The correct one is document.getElementByid("relogio").innerHTML start with "i" uppercase: camel case .

Only the element where you want to print the clock is missing. By% code%, it is assumed to be id with document.getElementById .innerHTML . Enter it in div :

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

If you want a timer so that the clock is not static, use id (uninterrupted timer that performs a function in the interval stipulated in milliseconds).

As you are calling the function via #relogio , in this case, you can put body at the end of the setInterval() function, like this:

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

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

To study:

Fixed 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're using HTML5, you do not need to declare onload in the script.

score 2 · Answer 3

Adjustments made

I missed the () function and put the lowercase r, as it is a best practice function starting with a lowercase letter and you are also calling in onload with lowercase.

Clock for clock ()

To create the date object, use Date ()

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

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

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

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

The name was incorrect because javascript is case sensitive

document.getElementByid for document.getElementById

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

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

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 should use setInterval as below.

setInterval(relogio, 1000);

You should insert before the line as it should be inside the script.