Javascript - Get an element regarding its data-slug

Question

I have on a webpage several buttons like that :

I'm catching a slug parameter passed in url that tells me which button I should click on page load. Question is how can I get the right button using javascript, since they don't have ids, to click it ?

Thanks !

user_14807111 · Answer

You can do this very simple with the onclick JS function. Then you have two options for reading out the data element. 1) getAttribute() and 2) dataset

function myFn(elem) {
  console.log('with getAttribute:', elem.getAttribute('data-slug'))
  console.log('with dataset:', elem.dataset.slug)  
}

click me! Slug One      
click me! Slug Two

user_15236761 · Answer

You've to use attribute selector to select those elements (assuming you're not using their classes to select them).

Here's the CSS attribute selector syntax: tag[attribute=value]. I think you can also replace tag with class or id but I'm not sure.

Now you can use this syntax in document.querySelector(selector).

const slugOne = document.querySelector("div[data-slug=slug-one]");

console.log(slugOne.innerText);

Content Of Slug One
Content Of Slug Two

user_9676887 · Answer

You can select all elements by class name with "getElementByClassName" and then looping all elements and do addEventListenet to all selected items and pass a function to get the attribute of each element when the user does click.

var elements = document.getElementsByClassName("jet-portfolio__filter-item");

var onClickItems = function() {
    var slug = this.getAttribute("data-slug");
    console.log(slug)
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', onClickItems);
}

Container number 1
Container number 2

user_10668052 · Answer

My suggestion (just click on Text #1 or Text #2):

document.querySelectorAll('.jet-portfolio__filter-item')
.forEach(el => el.onclick = () => console.log(el.innerText, el.dataset.slug));

Text #1
Text #2

Javascript - Get an element regarding its data-slug

4 Answers