querySelector() not working in all classes

Question

My first column should be actual date, but my js script works only for one class from my html code.

Question: How make that my js code works for every class in html code, I use querySelector(), but thing I should use something like $(this) but I can't know how.

var time = document.querySelector(".table_si_cell_stat-date");

time.innerHTML =new Date().toLocaleDateString([], {year:'numeric', month: 'long', day:'numeric', hour:'2-digit', minute:'2-digit'})

table thead th
{
 height:30px;
 padding:5px 0 5px 0;
}
table thead tr th:nth-child(1)
{
 width:200px;
}
table thead tr th:nth-child(2)
{
 width:150px;
}
table thead tr th:nth-child(3)
{
 padding-left:10px;
 padding-right:10px;
}
table tbody tr
{
 border-bottom:1px solid #bbb;

}
table thead tr
{
 border-bottom:1px solid #bbb;
 background-color:#ddd;
}
.table_si_cell_stat-date
{
 text-align:center;
}
.table_si_cell_stat-date-link
{
 text-align:center;
}
.table_si_cell_stat-date-user
{
 text-align:center;
 padding-left:20px;
 padding-right:20px; 
}
table
{
 border-collapse:collapse;
 font-family:Arial;
 font-size:14px;
 cursor:default;
 margin-top:10px;
 background-color:#fff;
 border:1px solid #ddd;
}
table a
{
 text-decoration:none;
 color:#08c;
}
table a:hover
{
 color:#05c;
}

<table>
  <thead>
 <tr>
   <th>Date</th>
   <th>Link</th>
   <th>Users</th>
 </tr>
  </thead>
  <tbody>
 <tr>
   <td class="table_si_cell_stat-date"></td>
   <td class="table_si_cell_stat-date-link">
  <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
   </td>
   <td class="table_si_cell_stat-date-user">
     <a href="#">John B.</a>
   </td>
 </tr>
 <tr>
   <td class="table_si_cell_stat-date"></td>
   <td class="table_si_cell_stat-date-link">
     <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
   </td>
   <td class="table_si_cell_stat-date-user">
     <a href="#">John B.</a>
   </td>
 </tr>
  </tbody>
</table>

you found time to post a question, but haven't found it to read about method in docs — uladzimir, Feb 12 '17 at 16:06
From MDN: *"Returns **the first Element** within the document (...) that matches the specified group of selectors."* https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector — Felix Kling, Feb 12 '17 at 16:07

score 4 · Accepted Answer · edited May 23 '17 at 12:17

If you mean it's not finding all elements with that class, that's because that's not its job. querySelector finds the first matching element. If you want a list, you want querySelectorAll instead.

var times = document.querySelectorAll(".table_si_cell_stat-date");

for (var t of times) {
  t.textContent = new Date().toLocaleDateString([], {
    year:'numeric',
    month: 'long',
    day:'numeric',
    hour:'2-digit',
    minute:'2-digit'
  });
}

<table>
  <thead>
 <tr>
   <th>Date</th>
   <th>Link</th>
   <th>Users</th>
 </tr>
  </thead>
  <tbody>
 <tr>
   <td class="table_si_cell_stat-date"></td>
   <td class="table_si_cell_stat-date-link">
  <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
   </td>
   <td class="table_si_cell_stat-date-user">
     <a href="#">John B.</a>
   </td>
 </tr>
 <tr>
   <td class="table_si_cell_stat-date"></td>
   <td class="table_si_cell_stat-date-link">
     <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
   </td>
   <td class="table_si_cell_stat-date-user">
     <a href="#">John B.</a>
   </td>
 </tr>
  </tbody>
</table>

Note: for-of loops are quite new, a feature of ES2015 (aka "ES6") and above. If you're coding to a pre-ES2015 environment, you can loop through the list with a simple for loop or any of the "array-like" suggestions in this answer.

score 1 · Answer 2 · answered Feb 12 '17 at 16:06

You need to use document.querySelectorAll(), it returns a list of element which you can iterate and set inner HTML.

var times = document.querySelectorAll(".table_si_cell_stat-date");
var text = .....
times.forEach((x) => x.innerHTML = text);

var times = document.querySelectorAll(".table_si_cell_stat-date");
var text = new Date().toLocaleDateString([], {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
});

times.forEach((x) => x.innerHTML = text);

table thead th {
  height: 30px;
  padding: 5px 0 5px 0;
}
table thead tr th:nth-child(1) {
  width: 200px;
}
table thead tr th:nth-child(2) {
  width: 150px;
}
table thead tr th:nth-child(3) {
  padding-left: 10px;
  padding-right: 10px;
}
table tbody tr {
  border-bottom: 1px solid #bbb;
}
table thead tr {
  border-bottom: 1px solid #bbb;
  background-color: #ddd;
}
.table_si_cell_stat-date {
  text-align: center;
}
.table_si_cell_stat-date-link {
  text-align: center;
}
.table_si_cell_stat-date-user {
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}
table {
  border-collapse: collapse;
  font-family: Arial;
  font-size: 14px;
  cursor: default;
  margin-top: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
table a {
  text-decoration: none;
  color: #08c;
}
table a:hover {
  color: #05c;
}

<table>
  <thead>
    <tr>
      <th>Date</th>
      <th>Link</th>
      <th>Users</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="table_si_cell_stat-date"></td>
      <td class="table_si_cell_stat-date-link">
        <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
      </td>
      <td class="table_si_cell_stat-date-user">
        <a href="#">John B.</a>
      </td>
    </tr>
    <tr>
      <td class="table_si_cell_stat-date"></td>
      <td class="table_si_cell_stat-date-link">
        <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
      </td>
      <td class="table_si_cell_stat-date-user">
        <a href="#">John B.</a>
      </td>
    </tr>
  </tbody>
</table>

Pranav C Balan · Answer 3 · 2017-02-12T16:12:24.190

The querySelector method only selects a single element, to get the collection of element use querySelectorAll method and iterate over them to update content.

var date = new Date().toLocaleDateString([], {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
});

var time = document.querySelectorAll(".table_si_cell_stat-date");

// for older browser use [].slice.call(time)    
Array.from(time).forEach(function(ele) {
  ele.innerHTML = date;
})

var date = new Date().toLocaleDateString([], {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
});
var time = document.querySelectorAll(".table_si_cell_stat-date");

Array.from(time).forEach(function(ele) {
  ele.innerHTML = date;
})

table thead th {
  height: 30px;
  padding: 5px 0 5px 0;
}
table thead tr th:nth-child(1) {
  width: 200px;
}
table thead tr th:nth-child(2) {
  width: 150px;
}
table thead tr th:nth-child(3) {
  padding-left: 10px;
  padding-right: 10px;
}
table tbody tr {
  border-bottom: 1px solid #bbb;
}
table thead tr {
  border-bottom: 1px solid #bbb;
  background-color: #ddd;
}
.table_si_cell_stat-date {
  text-align: center;
}
.table_si_cell_stat-date-link {
  text-align: center;
}
.table_si_cell_stat-date-user {
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}
table {
  border-collapse: collapse;
  font-family: Arial;
  font-size: 14px;
  cursor: default;
  margin-top: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
table a {
  text-decoration: none;
  color: #08c;
}
table a:hover {
  color: #05c;
}

<table>
  <thead>
    <tr>
      <th>Date</th>
      <th>Link</th>
      <th>Users</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="table_si_cell_stat-date"></td>
      <td class="table_si_cell_stat-date-link">
        <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
      </td>
      <td class="table_si_cell_stat-date-user">
        <a href="#">John B.</a>
      </td>
    </tr>
    <tr>
      <td class="table_si_cell_stat-date"></td>
      <td class="table_si_cell_stat-date-link">
        <a href="http://www.w3schools.com/cssref/sel_nth-child.asp">Check link</a>
      </td>
      <td class="table_si_cell_stat-date-user">
        <a href="#">John B.</a>
      </td>
    </tr>
  </tbody>
</table>

querySelector() not working in all classes

3 Answers3