3

Tenho uma função em JavaScript que retorna a data de hoje:

function getData(){
    var dataAtual = document.getElementsByClassName("dataAtual");
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth() + 1; //January is 0!
    var yyyy = today.getFullYear();

    if (dd < 10) {
        dd = '0' + dd;
    }

    if (mm < 10) {
        mm = '0' + mm;
    }

    today = dd + '/' + mm + '/' + yyyy;
    return (today);
}

Preciso que ela apareça nessa div:

<tr>
    <th scope="row">Data Abertura</th>
    <td class="dataAtual">AQUI</td>
</tr>

Precisa ser ao entrar na página, como faço isso?

3 Respostas 3

4

Chame a função no .innerHTML selecionando a classe com document.querySelector(".dataAtual"):

function getData(){
   // var dataAtual = document.getElementsByClassName("dataAtual");
   var today = new Date();
   var dd = today.getDate();
   var mm = today.getMonth() + 1; //January is 0!
   var yyyy = today.getFullYear();
   
   if (dd < 10) {
   dd = '0' + dd;
   }
   
   if (mm < 10) {
   mm = '0' + mm;
   }
   
   today = dd + '/' + mm + '/' + yyyy;
   return (today);
}

document.addEventListener("DOMContentLoaded", function(){
   
   document.querySelector(".dataAtual").innerHTML = getData();
   
});
<table>
   <th scope="row">Data Abertura</th>
   <td class="dataAtual">AQUI</td>
</table>

Mas faça isso dentro do evento DOMContentLoaded, que é disparado após o carregamento do DOM (elementos da página).

O seu código var dataAtual = document.getElementsByClassName("dataAtual"); não dá certo porque irá selecionar todos os elementos com a classe dataAtual criando um nodelist, e não um elemento específico. Pode remover do código essa linha.

Ou você pode fazer do seguinte modo, adicionando o índice [0] ao document.getElementsByClassName, considerando que só existe 1 elemento com essa classe na página (se houver mais de 1, irá pegar apenas o primeiro):

function getData(){
   var dataAtual = document.getElementsByClassName("dataAtual")[0];
   var today = new Date();
   var dd = today.getDate();
   var mm = today.getMonth() + 1; //January is 0!
   var yyyy = today.getFullYear();
   
   if (dd < 10) {
   dd = '0' + dd;
   }
   
   if (mm < 10) {
   mm = '0' + mm;
   }
   
   today = dd + '/' + mm + '/' + yyyy;
   
   dataAtual.innerHTML = today;
   
   return (today);
}

document.addEventListener("DOMContentLoaded", getData);
<table>
   <th scope="row">Data Abertura</th>
   <td class="dataAtual">AQUI</td>
</table>

3

Ao invés de usar class, dê preferência a usar id. Por serem únicos, eles evitam possíveis side-efects em seu código. Fica assim:

function getData(){
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth() + 1; //January is 0!
  var yyyy = today.getFullYear();

  if (dd < 10) {
    dd = '0' + dd;
  }
  if (mm < 10) {
    mm = '0' + mm;
  }

  var today = dd + '/' + mm + '/' + yyyy;
  return today;
}

var dataAtual = document.getElementById("dataAtual");
dataAtual.innerText = getData()
<div id='dataAtual'></div>

Ao selecionar o elemento através da função getElementById, podemos ter acesso à sua propriedade innerText que permite a inserção de um texto customizado. Esse código será executado logo ao carregar a página.

1

Você pode usar o evento onload:

function getData() {
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth() + 1; //January is 0!
  var yyyy = today.getFullYear();

  if (dd < 10) {
    dd = '0' + dd;
  }

  if (mm < 10) {
    mm = '0' + mm;
  }

  today = dd + '/' + mm + '/' + yyyy;
  return (today);
}

function definir() {
  document.querySelector('td.dataAtual').innerHTML = getData();
}
<body onload="definir()">
  <table>
    <tbody>
      <tr>
        <th scope="row">Data Abertura</th>
        <td class="dataAtual">AQUI</td>
      </tr>
    </tbody>
  </table>
</body>

querySelector

Retorna o primeiro elemento dentro do documento (usando ordenação em profundidade, pré-ordenada e transversal dos nós do documento) que corresponde ao grupo especificado de seletores.


innerHTML

A propriedade Element.innerHTML define ou obtém a sintaxe HTML descrevendo os elementos descendentes.


onload

Um manipulador de eventos para o evento de carregamento do objeto window.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .