How to retrieve the value of the HTML tag using Javascript (no jquery)

Question

How to retrieve the value of the HTML <a> tag using Vanilla Javascript

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td><a>Jill</a></td>
    <td><a>Sam</a></td>
    <td><a>10</a></td>
  </tr>
  <tr>
    <td><a>Eve</a></td>
    <td><a>Jeffreson</a></td>
    <td><a>55</a></td>
  </tr>
</table>

When the user clicks on the tag, I would like to retrieve the value of the tag so that I know which one was clicked on using JS

Here is what I tried: var list = document.getElementsByTagName("a");

score 3 · Answer 1 · answered Feb 11 '21 at 09:53

You need to add a click event listener to the <a> elements, and then you can access the inner HTML of the element that triggered the event. Since you are retrieving a collection of HTML elements, you should iterate through it.

One way to iterate through a collection is to simply convert it to an array using Array.from() and then chain .forEach() to it:

const list = document.getElementsByTagName("a");
Array.from(list).forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    console.log(e.target.innerText);
  });
});

Array.from(document.getElementsByTagName('a')).forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    console.log(e.target.innerText);
  });
});

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td><a href="#">Jill</a></td>
    <td><a href="#">Sam</a></td>
    <td><a href="#">10</a></td>
  </tr>
  <tr>
    <td><a href="#">Eve</a></td>
    <td><a href="#">Jeffreson</a></td>
    <td><a href="#">55</a></td>
  </tr>
</table>

However I tend to recommend using document.querySelectorAll because you can pass CSS selectors as strings. Here is an example using document.querySelectorAll():

document.querySelectorAll('a').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    console.log(e.target.innerText);
  });
});

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td><a href="#">Jill</a></td>
    <td><a href="#">Sam</a></td>
    <td><a href="#">10</a></td>
  </tr>
  <tr>
    <td><a href="#">Eve</a></td>
    <td><a href="#">Jeffreson</a></td>
    <td><a href="#">55</a></td>
  </tr>
</table>

score 2 · Accepted Answer · answered Feb 11 '21 at 09:52

function myFunction(val){
console.log(val.innerHTML)
}

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td><a onclick="myFunction(this)">Jill</a></td>
    <td><a onclick="myFunction(this)">Sam</a></td>
    <td><a onclick="myFunction(this)">10</a></td>
  </tr>
  <tr>
    <td><a onclick="myFunction(this)">Eve</a></td>
    <td><a onclick="myFunction(this)">Jeffreson</a></td>
    <td><a onclick="myFunction(this)">55</a></td>
  </tr>
</table>

Hi, thanks for your help. Do you know if there is a name to this particular technique? — randomUser786, Dec 02 '21 at 16:20

score 2 · Answer 3 · answered Feb 11 '21 at 09:56

You can iterate over the list using Array.from() and then just use onclick event and innerText property for each element:

Array.from(list).forEach(el => {
  el.onclick = function(e) {
    alert(this.innerText);
  }
});

Demo:

var list = document.getElementsByTagName("a");

Array.from(list).forEach(el => {
  el.onclick = function(e) {
    alert(this.innerText);
  }
});

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td><a>Jill</a></td>
    <td><a>Sam</a></td>
    <td><a>10</a></td>
  </tr>
  <tr>
    <td><a>Eve</a></td>
    <td><a>Jeffreson</a></td>
    <td><a>55</a></td>
  </tr>
</table>

How to retrieve the value of the HTML tag using Javascript (no jquery)

3 Answers3