How to get the toplevel node of each anchor inside li in JavaScript?

Question

So I have my html like so:

<ul id="page-nav">
  <li class="text-muted menu-title">Navigation</li>
  <li>
    <a href="#" class="waves-effect active">
      <img src="img/archive.svg" alt="archive"><span class="menu-spans"> Dashboard </span> 
    </a>
  </li>
  <li>
    <a href="#" class="waves-effect">
      <img src="img/speech-bubble.svg" alt="speech"><span class="menu-spans"> Chat </span> 
    </a>
  </li>
  <li>
    <a href="#" class="waves-effect">
      <img src="img/gains.svg" alt="speech"><span class="menu-spans"> Gains </span> 
    </a>
  </li>
</ul>

When a user clicks on any of the element within the li, I would like to add a class to the li.

How can this be done in pure JavaScript?

My initial thought was the following:

document.getElementById("page-nav").addEventListener(
  "click", i => {
    // debug purposes
    console.log(this.parentNode);
  }
);

But it dont work.

What is the console log telling you? Also try this.parent to see if that works. — , Dec 26 '16 at 11:37
I tried `this.parent` and `this.parentNode`. Both of them are printing `undefined`. @jeff — WorldWideBangers, Dec 26 '16 at 11:39
I am, But Id like to know how it works with javascript. @pathaktejpal — WorldWideBangers, Dec 26 '16 at 11:43
Just re-looked at your code. You are capturing the event that has bubbled up to the ul element not where it originated. — , Dec 26 '16 at 11:44
You could but you still wont know what was clicked. You need to rethink your addEventListener. — , Dec 26 '16 at 11:48
@WorldWideBangers I'm added an answer with js,check it and do not forget to tick it if it's useful :P — ADH - THE TECHIE GUY, Dec 26 '16 at 12:06

score 1 · Accepted Answer · answered Dec 26 '16 at 12:00

you can do that using currentTarget in js .I'm added the snippet below(here I'm added the class .red to corresponding li when click on the sub items)

var k = document.getElementsByClassName("item");

for(i = 0 ;i < k.length; i++)
{
  
    k[i].addEventListener("click",function(event){
      var el = event.currentTarget;
      var value = el.id;
      document.getElementById(value).classList.add ("red");

    });
}

.red{
  background:red;
  }

<ul id="page-nav">
  <li class="text-muted menu-title">Navigation</li>
  <li class="item" id="one">
    <a href="#" class="waves-effect active">
      <img src="img/archive.svg" alt="archive"><span class="menu-spans"> Dashboard </span> 
    </a>
  </li>
  <li class="item" id="two">
    <a href="#" class="waves-effect">
      <img src="img/speech-bubble.svg" alt="speech"><span class="menu-spans"> Chat </span> 
    </a>
  </li>
  <li class="item" id="three">
    <a href="#" class="waves-effect">
      <img src="img/gains.svg" alt="speech"><span class="menu-spans"> Gains </span> 
    </a>
  </li>
</ul>

Thank you! You're a legend! – WorldWideBangers Dec 26 '16 at 12:09 — WorldWideBangers, Dec 26 '16 at 12:09
you are welcome...:P – ADH - THE TECHIE GUY Dec 26 '16 at 12:11 — ADH - THE TECHIE GUY, Dec 26 '16 at 12:11

How to get the toplevel node of each anchor inside li in JavaScript?

1 Answers1