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

Question

How to retrieve the value of the HTML tag using Vanilla Javascript


  
    Firstname
    Lastname
    Age
  
  
    Jill
    Sam
    10
  
  
    Eve
    Jeffreson
    55

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

user_395910 · Answer

You need to add a click event listener to the 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);
  });
});


  
    Firstname
    Lastname
    Age
  
  
    Jill
    Sam
    10
  
  
    Eve
    Jeffreson
    55

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


  
    Firstname
    Lastname
    Age
  
  
    Jill
    Sam
    10
  
  
    Eve
    Jeffreson
    55

user_10805479 · Answer

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


  
    Firstname
    Lastname
    Age
  
  
    Jill
    Sam
    10
  
  
    Eve
    Jeffreson
    55

user_3669624 · Answer

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


  
    Firstname
    Lastname
    Age
  
  
    Jill
    Sam
    10
  
  
    Eve
    Jeffreson
    55

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

3 Answers