CODEWITHSUNDEEP
javascripthtmlhtml-tableinnerhtml
Apollunar
Apollunar

Reputation: 31

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

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.

Upvotes: 2

Views: 1820

Answers (4)

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20944

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>

Upvotes: 2

Apollunar
Apollunar

Reputation: 31

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.

Upvotes: 0

Mamun
Mamun

Reputation: 68923

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>

Upvotes: 3

Praneet Dixit
Praneet Dixit

Reputation: 1425

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>

Upvotes: 0

Related Questions