How can I set a variable in JavaScript using attributes other than tag, class or ID name?

Question

So my question is quite simple, see the code below. I would like to save the two spans in two different variables based on their value in the "data-language" attribute. Any idea how could I do this?

<div class="language-select">
          <span class="language-item" data-language="hu">HU </span>
          <span>/ </span>
          <span class="language-item" data-language="en"> EN</span>
        </div>

By using an attribute selector https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors — cloned, Jan 16 '23 at 07:12
Better have an array of languages: `const languages = [...document.querySelectorAll("[data-language]")].map(ele => ele.dataset.language)` — mplungjan, Jan 16 '23 at 07:19
For the spans: `const languageSpans = document.querySelectorAll("[data-language]")` — mplungjan, Jan 16 '23 at 07:21
Lookup: `const languageSpansByLanguage = [...document.querySelectorAll("[data-language]")].reduce((acc,ele) => (acc[ele.dataset.language] = ele,acc),{}); console.log(languageSpansByLanguage["hu"])` — mplungjan, Jan 16 '23 at 07:22

score -1 · Answer 1 · answered Jan 16 '23 at 07:14

You can just use an attribute selector

const span1 = document.querySelector('[data-language="hu"]');
const span2 = document.querySelector('[data-language="en"]');

console.log(span1, span2);

<div class="language-select">
  <span class="language-item" data-language="hu">HU </span>
  <span>/ </span>
  <span class="language-item" data-language="en"> EN</span>
</div>

How can I set a variable in JavaScript using attributes other than tag, class or ID name?

1 Answers1