Dapatkan atribut elemen yang diklik menggunakan Javascript? [duplikat]

Saya ingin mendapatkan atribut "nama" dari div yang diklik dan menggunakannya untuk fungsi lain menggunakan Javascript vanilla. Saya mencoba beberapa solusi yang ditemukan di Stack Overflow, tetapi tidak ada yang berhasil. Adakah yang bisa membantu?

Inilah yang saya coba (versi yang masuk akal bagi saya):

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>


javascript html ecmascript-6 dom-events
person Mohamed Arkib    schedule 20.02.2020    source sumber
comment
stackoverflow.com/questions/10086427/   -  person James    schedule 20.02.2020
comment
e.target itulah yang diklik, yang sepertinya adalah tag img. Anda menginginkan e.currentTarget, yang merupakan elemen yang terikat pada pendengar.   -  person James    schedule 20.02.2020
comment
Terima kasih, ini bekerja dengan sempurna   -  person Mohamed Arkib    schedule 21.02.2020

Jawaban (1)


arrow_upward
0
arrow_downward

Daripada targetgunakan Event.currentTarget< /a>:

Properti currentTarget read-only pada antarmuka Acara mengidentifikasi target acara saat ini, saat acara melintasi DOM. Itu selalu mengacu pada elemen dimana event handler telah dilampirkan, bukan Event.target, yang mengidentifikasi elemen tempat kejadian terjadi dan yang mungkin merupakan turunannya.

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>

ATAU: Anda cukup menggunakan this kata kunci:

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>

person Mamun    schedule 20.02.2020
comment
Anda juga dapat menggunakan this. - person Barmar; 20.02.2020
comment
Terima kasih banyak!! Ini juga berhasil... - person Mohamed Arkib; 21.02.2020
comment
@MohamedArkib, sama-sama :) - person Mamun; 21.02.2020