Javascript - Show function result in class

Asked

Viewed 60 times

3

I have a Javascript function that returns today’s date:

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);
}

I need her to show up on this div:

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

It needs to be when entering the page, how do I do it?

javascript html

3 answers

4


Call the function on .innerHTML selecting the class with 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>

But do it within the event DOMContentLoaded, that is fired after DOM loading (page elements).

Your code var dataAtual = document.getElementsByClassName("dataAtual"); does not work because it will select all elements with the class dataAtual creating a nodelist, and not a specific element. You can remove that line from the code.

Or you can do as follows by adding the index [0] at the document.getElementsByClassName, whereas there is only 1 element with that class on the page (if there is more than 1, you will only take the first):

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

Instead of using class, prefer to use id. Because they are unique, they avoid possible side-effectcts in your code. It looks like this:

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>

When selecting the element through the function getElementById, we may have access to your property innerText which allows the insertion of custom text. This code will be executed just by loading the page.

1

You can use the event 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

Returns the first element within the document (using deep, pre-ordered and cross-sectional sorting of document nodes) that corresponds to the specified group of selectors.

innerHTML

The estate Element.innerHTML define or obtain the syntax HTML describing the descending elements.

onload

An event handler for the object load event window.

Browser other questions tagged javascript html

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