1

I want to get the "name" attribute of a div that was clicked and use it for another function using vanilla Javascript. I tried multiple solutions found on Stack Overflow, but nothing works. Can somebody help?

Here's what I tried (the version that made sense to me):

let navLinks = document.querySelectorAll(".navbar .item");
navLinks.forEach(function(link) {
  link.addEventListener("click", function(e) {
    let attr = e.target.getAttribute('name');
    console.log(attr); //logs null

    //openPage(".home");
  });
});
<nav class="navbar">
  <div class="container">
    <div name="home" class="item active">
      <div><img src="img/icons/home1.png"></div>
      <div>Home</div>
    </div>
    <div name="faq" class="item">
      <div><img src="img/icons/faq2.png"></div>
      <div>FAQ</div>
    </div>
    <div name="calc" class="item cta_calc">
      <div><img src="img/icons/dash1.png"></div>
    </div>
    <div name="about" class="item">
      <div><img src="img/icons/info3.png"></div>
      <div>About</div>
    </div>
    <div name="contact" class="item">
      <div><img src="img/icons/info2.png"></div>
      <div>Contact</div>
    </div>
  </div>
</nav>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Mohamed Arkib
  • 53
  • 6
  • https://stackoverflow.com/questions/10086427/what-is-the-exact-difference-between-currenttarget-property-and-target-property/10086501 – James Feb 20 '20 at 18:26
  • e.target is what was clicked, which seems to be the img tag. You want e.currentTarget, which is the element that the listener is bound to. – James Feb 20 '20 at 18:26
  • Thanks, this worked perfectly – Mohamed Arkib Feb 21 '20 at 15:14

1 Answers1

0

Instead of targetuse Event.currentTarget:

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

let attr = e.currentTarget.getAttribute('name');


let navLinks = document.querySelectorAll(".navbar .item");        
navLinks.forEach(function(link){
  link.addEventListener("click",function(e){
    let attr = e.currentTarget.getAttribute('name');
    console.log(attr); //logs null

    //openPage(".home");
  });
});
<nav class="navbar">
    <div class="container">
        <div name="home" class="item active">
            <div><img src="img/icons/home1.png"></div>
            <div>Home</div>
        </div>
        <div name="faq" class="item">
            <div><img src="img/icons/faq2.png"></div>
            <div>FAQ</div>
        </div> 
        <div name="calc" class="item cta_calc">
            <div><img src="img/icons/dash1.png"></div>
        </div> 
        <div name="about" class="item">
            <div><img src="img/icons/info3.png"></div>
            <div>About</div>
        </div> 
        <div name="contact" class="item">
            <div><img src="img/icons/info2.png"></div>
            <div>Contact</div>
        </div>
    </div>       
</nav>

OR: You can simply use this keyword:

let attr = this.getAttribute('name');


let navLinks = document.querySelectorAll(".navbar .item");        
navLinks.forEach(function(link){
  link.addEventListener("click",function(e){
    let attr = this.getAttribute('name');
    console.log(attr); //logs null

    //openPage(".home");
  });
});
<nav class="navbar">
    <div class="container">
        <div name="home" class="item active">
            <div><img src="img/icons/home1.png"></div>
            <div>Home</div>
        </div>
        <div name="faq" class="item">
            <div><img src="img/icons/faq2.png"></div>
            <div>FAQ</div>
        </div> 
        <div name="calc" class="item cta_calc">
            <div><img src="img/icons/dash1.png"></div>
        </div> 
        <div name="about" class="item">
            <div><img src="img/icons/info3.png"></div>
            <div>About</div>
        </div> 
        <div name="contact" class="item">
            <div><img src="img/icons/info2.png"></div>
            <div>Contact</div>
        </div>
    </div>       
</nav>
Mamun
  • 66,969
  • 9
  • 47
  • 59