abrufen Name Wert von Schaltfläche in Javascript

Question

Ich habe die folgende 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"> 

, die eine Dropdown-Liste macht, wenn eine neue Klasse geklickt wird angehängt, die is-dropped so die Eltern genannt wird div aussehen wird Dies ist einmal geklickt worden

Nun benutze Javascript Ich versuche name="toggle-segment-cagetories-list" abrufen, die wir innerhalb DTM (Adobe Tag Manager) als eVar Wert verwenden werden e, aber ich bin unsicher, wie ich mich über diesen Namen Wert abrufen, so weit ich das folgende Javascript habe:

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"); 
} 

Jetzt bin ich ziemlich neu in javascript so, wenn jemand in etwas Licht kann, wie ich über gehen den Namen Wert bekommen und es an DTM übergeben würde ich es sehr schätzen.

Answer 1

Verwendung 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

, wenn Sie Ihre eigenen Daten-Attribute verwenden möchten, müssen Sie Ihre Attributnamen mit ‚data‘ starten:

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

Um den Wert des Attributs abzurufen, können Sie wie in der gezeigt tun Beispiel unten:

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