JS : How do I get the innerHTML of a TD element when I click on it?

user_13916228 0
Viewed 1026

I've started to learn JavaScript not long ago.

I have several td elements in HTML and when I click on one of them, I would like to get it's innerHTML in JS. (Vanilla JS)

<div class="calendarCont">
   <table>
      <tr>
         <td>Jan</td>
         <td>Feb</td>
         <td>Mar</td>
         <td>Apr</td>
      </tr>
      <tr>
         <td>May</td>
         <td>Jun</td>
         <td>Jul</td>
         <td>Aug</td>
      </tr>                                                                 
   </table>
</div>

I already know this method :

<td onclick="clickedCell = this.innerHTML; console.log(clickedCell)>Jan</td>

But what I'm looking for is a function with an addEventListener if it is possible, but I'm open to any suggestions.

Thank you.

innerhtml html-table html javascript
4 Answers

I will suggest you to avoid inline event handler. You can first target all the tds using querySelectorAll(), then loop through them and attach the event using addEventListener():

var tds = document.querySelectorAll('.calendarCont table tr td');
tds.forEach(function(td){
  td.addEventListener('click', handleTDClick);
});

function handleTDClick(){
  console.log(this.textContent);
}
<div class="calendarCont">
   <table>
      <tr>
         <td>Jan</td>
         <td>Feb</td>
         <td>Mar</td>
         <td>Apr</td>
      </tr>
      <tr>
         <td>May</td>
         <td>Jun</td>
         <td>Jul</td>
         <td>Aug</td>
      </tr>                                                                 
   </table>
</div>

user_74613810

In JavaScript select an element that wraps all of the elements you want to be able to click. A good candidate for this might be the <table>, or maybe the .calendarCont element.

The reason for selecting a wrapping element is for event delegation, which means that all events that are triggered within the wrapping element will also be triggered on the wrapping element itself. So you'll only have to add a single event listener for all the elements. Though this will require some checking when the user clicks.

Add an event listener with addEventListener to the table element and listen for the 'click' event. Write a function, like you already have which will handle the click.

Because every element can now be clicked inside the <table> element to trigger the click, you'll want to check which element has been clicked. Every fired event has an Event object with info about the event, which can be read from the event handler (callback function).

The event.target property is the element that triggered the click event. By evaluating if the target is the element that you are looking for you can control your event even better. For example, in your case, only show the innerHTML whenever the element is a <td>. Otherwise, do nothing.

const table = document.querySelector('table');

function onTableClick(event) {
  const isCell = event.target.tagName.toLowerCase() === 'td';
  if (isCell) {
    console.log(event.target.innerHTML);
  }
}

table.addEventListener('click', onTableClick);
<div class="calendarCont">
   <table>
      <tr>
         <td>Jan</td>
         <td>Feb</td>
         <td>Mar</td>
         <td>Apr</td>
      </tr>
      <tr>
         <td>May</td>
         <td>Jun</td>
         <td>Jul</td>
         <td>Aug</td>
      </tr>                                                                 
   </table>
</div>

user_116196470

querySelectorAll and loops will be your friends.

Target each element and loop through the result to addEventListener to each of the td.

function alertInnerHTML(){
  alert(this.innerHTML);
}

let tds = document.querySelectorAll("td");
tds.forEach(td => {
  td.addEventListener("click", alertInnerHTML)
});
<div class="calendarCont">
   <table>
      <tr>
         <td>Jan</td>
         <td>Feb</td>
         <td>Mar</td>
         <td>Apr</td>
      </tr>
      <tr>
         <td>May</td>
         <td>Jun</td>
         <td>Jul</td>
         <td>Aug</td>
      </tr>                                                                 
   </table>
</div>

user_136065090

So one method that works well is :

var selectedTableTD = document.querySelector('.calendarCont')
var tds = selectedTableTD.querySelectorAll('td');

tds.forEach(function(td){
  td.addEventListener('click', function(){
    console.log(this.textContent);
  });
});

Thank you everyone for your help.

user_139162280
Related