Javascript does not work

Asked

Viewed 161 times

0

Why is my Javascript code not working? My other codes always work, but this one doesn’t have to make it work. I want to put a date clock at the top of the page and I don’t want to leave those lines of code inside the index.

<SCRIPT LANGUAGE="javascript">

var now = new Date();
var mName = now.getMonth() +1 ;
var dName = now.getDay() +1;
var dayNr = now.getDate();
var yearNr=now.getYear();
if(dName==1) {Day = "Domingo";}
if(dName==2) {Day = "Segunda-feira";}
if(dName==3) {Day = "Terça-feira";}
if(dName==4) {Day = "Quarta-feira";}
if(dName==5) {Day = "Quinta-feira";}
if(dName==6) {Day = "Sexta-feira";}
if(dName==7) {Day = "Sábado";}
if(mName==1){Month = "Janeiro";}
if(mName==2){Month = "Fevereiro";}
if(mName==3){Month = "Março";}
if(mName==4){Month = "Abril";}
if(mName==5){Month = "Maio";}
if(mName==6){Month = "Junho";}
if(mName==7){Month = "Julho";}
if(mName==8){Month = "Agosto";}
if(mName==9){Month = "Setembro";}
if(mName==10){Month = "Outubro";}
if(mName==11){Month = "Novembro";}
if(mName==12){Month = "Dezembro";}
if(yearNr < 2000) {Year = 1900 + yearNr;}
else {Year = yearNr;}
var todaysDate =(" " + Day + ", " + dayNr + "/" + Month + "/" + Year);

document.write('  '+todaysDate);

</SCRIPT>

<SPAN ID="Clock">00:00:00</SPAN>

<SCRIPT LANGUAGE="JavaScript">
    <!--
var Elem = document.getElementById("Clock");
function Horario(){
    var Hoje = new Date();
    var Horas = Hoje.getHours();
    if(Horas < 10){
        Horas = "0"+Horas;
    }
    var Minutos = Hoje.getMinutes();
    if(Minutos < 10){
        Minutos = "0"+Minutos;
    }
    var Segundos = Hoje.getSeconds();
    if(Segundos < 10){
        Segundos = "0"+Segundos;
    }
    Elem.innerHTML = Horas+":"+Minutos+":"+Segundos;
}
window.setInterval("Horario()",1000);
</SCRIPT>
javascript date

  • If you don’t want to leave the code on index, where do you want to put it? In a separate Javascript file? And why do you say it didn’t work? Error? Which?

  • I want to use it in separate javascript. When I put it like that in js, it appears error saying that it is missing a statement and at the beginning it says that it expects a new line or with point-and-comma. I want to call this javascript function by index to appear at the top of the html page

  • Has a <!-- within the tag of <script> that makes it not work. Now you can do all this much more organized and short

  • Oh yes Isac, I took that <!-- but still gave error. As it would be shorter and organized. I found some here, but when I play pro html, it does not pull formatting I want and also very extensive.

1 answer

1

For your code to work, you only have to remove the <!-- who is in the second <script>:

<SCRIPT LANGUAGE="javascript">

var now = new Date();
var mName = now.getMonth() +1 ;
var dName = now.getDay() +1;
var dayNr = now.getDate();
var yearNr=now.getYear();
if(dName==1) {Day = "Domingo";}
if(dName==2) {Day = "Segunda-feira";}
if(dName==3) {Day = "Terça-feira";}
if(dName==4) {Day = "Quarta-feira";}
if(dName==5) {Day = "Quinta-feira";}
if(dName==6) {Day = "Sexta-feira";}
if(dName==7) {Day = "Sábado";}
if(mName==1){Month = "Janeiro";}
if(mName==2){Month = "Fevereiro";}
if(mName==3){Month = "Março";}
if(mName==4){Month = "Abril";}
if(mName==5){Month = "Maio";}
if(mName==6){Month = "Junho";}
if(mName==7){Month = "Julho";}
if(mName==8){Month = "Agosto";}
if(mName==9){Month = "Setembro";}
if(mName==10){Month = "Outubro";}
if(mName==11){Month = "Novembro";}
if(mName==12){Month = "Dezembro";}
if(yearNr < 2000) {Year = 1900 + yearNr;}
else {Year = yearNr;}
var todaysDate =(" " + Day + ", " + dayNr + "/" + Month + "/" + Year);

document.write('  '+todaysDate);

</SCRIPT>

<SPAN ID="Clock">00:00:00</SPAN>

<SCRIPT LANGUAGE="JavaScript">
//   <!--
var Elem = document.getElementById("Clock");
function Horario(){
    var Hoje = new Date();
    var Horas = Hoje.getHours();
    if(Horas < 10){
        Horas = "0"+Horas;
    }
    var Minutos = Hoje.getMinutes();
    if(Minutos < 10){
        Minutos = "0"+Minutos;
    }
    var Segundos = Hoje.getSeconds();
    if(Segundos < 10){
        Segundos = "0"+Segundos;
    }
    Elem.innerHTML = Horas+":"+Minutos+":"+Segundos;
}
window.setInterval("Horario()",1000);
</SCRIPT>

Notice that the code you have in the question I just commented on the <!--.

However, you can do what you are trying to do in a much more organised, flexible and short way:

var now = new Date();
var mName = now.getMonth();
var dName = now.getDay() +1;
var dayNr = now.getDate();
var yearNr = now.getFullYear(); //troca de getYear() para getFullYear()

const weekDays = ['Domingo', 'Segunda-feira','Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado' ];
const monthNames = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];

let day = weekDays[dName-1]; //obter o dia da semana com base no array
let month = monthNames[mName]; //obter o nome do mês com base no array
let todaysDate = " " + day + ", " + dayNr + "/" + month + "/" + yearNr;
document.getElementById("today").innerHTML = todaysDate;

const elem = document.getElementById("clock");

setInterval(function(){
    let hoje = new Date();     
    elem.innerHTML = hoje.getHours().toString().padStart(2,"0")+":"+
                     hoje.getMinutes().toString().padStart(2,"0")+":"+
                     hoje.getSeconds().toString().padStart(2,"0");
},1000);
<span id="today"></span>
<span id="clock">00:00:00</span>

Summary of amendments:

  • It is not recommended to use labels and/or attributes in uppercase so I changed most of them
  • document.write is not recommended and so I created a new <span> to put the date in the format it had
  • I created an array for days of the week and another for months to be organized and simpler
  • I made the logic of the zeroes in the clock based on function padStart of the string that makes it easier
  • I switched the getYear for getFullYear that already brings the year in 4 digits, not requiring manipulation

I could still elaborate a little more, but at least this way already shows you another way to do the same.

  • I would suggest setting the function Horario() within the setInterval. Dry plus code. + 1

  • @Right, I agree, it gets even simpler. And I appreciate the comment

  • Take away a doubt, please, this padStart works on all browsers?

  • @On his own behalf documentation on MDN, just doesn’t work on old IE, even Edge works. Still they have Polyfill if it’s not available.

  • IE 11 doesn’t work, Edge does work.

  • Excuse my ignorance Isac, but how do I put this inside the function or inside a javascript file to make the call by html?

  • @Fábioalves Just include the javascript file with <script src="arquivo.js"></script> in the <head> html and put the whole code into the file within window.onload = function {/*codigo da pergunta aqui */};

Show 2 more comments

Browser other questions tagged javascript date

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