Получить значение имени от кнопки в JavaScript

Question

У меня есть следующие HTML:

<div class="dropdown" data-offers-filter-segments=""> 
    <button class="toggle--dropdown" name="toggle-segment-cagetories-list"> 
    <span class="dropdown__label" id="dropdown__labelAllCategories">All Categories</span> 
    </button> 
<div class="dropdown__content" hidden="hidden"> 

Который оказывает ниспадающее меню, при нажатии на новый класс прилагается, который называется is-dropped, чтобы родительский div будет выглядеть этот раз его нажимали на class="dropdown is-dropped"

Теперь с помощью Javascript Я пытаюсь получить name="toggle-segment-cagetories-list", который мы будем использовать в DTM (Adobe Tag Manager) в качестве VALU Evar е, но я не зная, как я идти о получении этого значения имени, до сих пор я следующий JavaScript:

function hasClass(element, cls) { 
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; 
} 

if(hasClass(document.getElementsByClassName('dropdown')[0], 'is-dropped')){ 
// Now get the name value ? 
} 
else { 
    alert("false"); 
} 

Теперь я довольно новый для javascript, так что если кто-то может пролить некоторый свет на том, как я могу идти о получив значение имени и передав его DTM Я был бы очень признателен.

Answer 1

использование document.querySelector:

<div class="dropdown is-dropped" data-offers-filter-segments=""> 
    <button class="toggle--dropdown" name="toggle-segment-cagetories-list"> 
    <span class="dropdown__label" id="dropdown__labelAllCategories">All Categories</span> 
    </button> 
<div class="dropdown__content" hidden="hidden"> 

<script> 
var button=document.querySelector('div.is-dropped button.toggle--dropdown'); 
var name=button&&button.name||''; 
alert(name); 
</script> 

Answer 2

, если вы хотите использовать свои собственные данные-атрибуты, вы должны начать свое имя атрибута с «данными»:

<button class="toggle--dropdown" data-name="toggle-segment-cagetories-list"> 

Для того, чтобы получить значение атрибута, вы можете сделать, как показано в пример ниже:

var article = document.getElementsByClassName('toggle--dropdown'); 
    article[0].dataset.name // article[0] because getting elements by className returns an array