Получить атрибут щелкнутого элемента с помощью Javascript?

Я хочу получить атрибут «имя» элемента div, который был нажат, и использовать его для другой функции с использованием ванильного Javascript. Я попробовал несколько решений, найденных на Stack Overflow, но ничего не работает. Кто-нибудь может помочь?

Вот что я пробовал (версия, которая имела смысл для меня):

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 источник
comment
stackoverflow.com/questions/10086427/   -  person James    schedule 20.02.2020
comment
e.target — это то, что было нажато, похоже, это тег img. Вам нужен e.currentTarget, элемент, к которому привязан слушатель.   -  person James    schedule 20.02.2020
comment
Спасибо, это сработало отлично   -  person Mohamed Arkib    schedule 21.02.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вместо targetиспользуйте Event.currentTarget< /а>:

Доступное только для чтения свойство currentTarget интерфейса Event идентифицирует текущую цель для события, когда событие проходит через DOM. Он всегда относится к элементу, к которому был присоединен обработчик события, в отличие от Event.target, который идентифицирует элемент, в котором произошло событие и который может быть его потомком.

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>

ИЛИ: вы можете просто использовать this ключевое слово:

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
Вы также можете использовать this. - person Barmar; 20.02.2020
comment
Большое Вам спасибо!! Это тоже сработало... - person Mohamed Arkib; 21.02.2020
comment
@MohamedArkib, добро пожаловать :) - person Mamun; 21.02.2020