Getting data attribute from class with JavaScript

Question

I have a number of divs with the same season-list class and each has a data-episode-count data attribute. I need to be able to grab the attribute on click and use that value to hide js-show-more-trigger if the value of the attribute is greater than 6. I'm currently looping through all season-list classes, but not sure how to grab the data attribute from the div:

HTML

<div class="js-season-list-item" id="season-5" style="display: block;">
  <div class="season-list" data-episode-count="3">
    <div class="season-list__item">
      <div class="episode-item">
        <div class="episode-card js-episode-card">
          <div class="episode-card__overlay"><a href="/play/3099013"><span class="play-circle sm" data-play-path="/play/3099013"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></a></div>
        </div>
        <div class="episode-details">
          <h1 class="heading md hvy">Episode 1</h1>
          <p></p>
          <p class="runtime">21min</p>
        </div>
      </div>
    </div>
    <div class="season-list__item">
      <div class="episode-item">
        <div class="episode-card js-episode-card">
          <div class="episode-card__overlay"><a href="/play/3099014"><span class="play-circle sm" data-play-path="/play/3099014"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></a></div>
        </div>
        <div class="episode-details">
          <h1 class="heading md hvy">Episode 2</h1>
          <p></p>
          <p class="runtime">21min</p>
        </div>
      </div>
    </div>
    <div class="season-list__item">
      <div class="episode-item">
        <div class="episode-card js-episode-card">
          <div class="episode-card__overlay"><a href="/play/3099015"><span class="play-circle sm" data-play-path="/play/3099015"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></a></div>
        </div>
        <div class="episode-details">
          <h1 class="heading md hvy">Episode 3</h1>
          <p></p>
          <p class="runtime">21min</p>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

let trigger = document.getElementsByClassName('js-show-more-trigger');
let seasonList = document.getElementsByClassName("season-list")
for(let i = 0; i < seasonList.length; i++) {
  if(seasonList[i].getAttribute('data-episode-count') < 6){
    trigger.style.display = "none";
  }
}

Codepen: Link

Answer 1

You can get data in Javascript by dataset property. In your case:

let seasonList = document.getElementsByClassName("season-list")
for(let i = 0; i < seasonList.length; i++) {
  console.log(seasonList[i].dataset.episodeCount)
}

Answer 2

With Element.getAttribute()

seasonList[i].getAttribute('data-episode-count');

With HTMLElement.dataset

seasonList[i].dataset.episodeCount;

Answer 3

First and foremost you can check the documentation for better understating.

If I understand you correctly, you want to hide the "Show More" link when the episodeCount > 6 , the snippet below is working as intended. Your if statement was only hiding the trigger if the value was less then 6.

You can check the behavior by changing the data-episode-count value.

 let trigger = document.getElementsByClassName('js-show-more-trigger'); let seasonList = document.getElementsByClassName("season-list") for(let i = 0; i < seasonList.length; i++) { if(seasonList[i].dataset.episodeCount > 6){ trigger[i].style.display = "none"; } } 

 .season-list{ display: flex; } 

 <div class="js-season-list-item" id="season-5" style="display: block;"> <div class="season-list" data-episode-count="7"> <div class="season-list__item"> <div class="episode-item"> <div class="episode-card js-episode-card"> <div class="episode-card__overlay"><a href="/play/3099013"><span class="play-circle sm" data-play-path="/play/3099013"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></a></div> </div> <div class="episode-details"> <h1 class="heading md hvy">Episode 1</h1> <p></p> <p class="runtime">21min</p> </div> </div> </div> <div class="season-list__item"> <div class="episode-item"> <div class="episode-card js-episode-card"> <div class="episode-card__overlay"><a href="/play/3099014"><span class="play-circle sm" data-play-path="/play/3099014"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></a></div> </div> <div class="episode-details"> <h1 class="heading md hvy">Episode 2</h1> <p></p> <p class="runtime">21min</p> </div> </div> </div> <div class="season-list__item"> <div class="episode-item"> <div class="episode-card js-episode-card"> <div class="episode-card__overlay"><a href="/play/3099015"><span class="play-circle sm" data-play-path="/play/3099015"><svg class="svg svg-play"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/svg-defs.svg#svg-play">svg-play</use></svg></span></a></div> </div> <div class="episode-details"> <h1 class="heading md hvy">Episode 3</h1> <p></p> <p class="runtime">21min</p> </div> </div> </div> </div> </div> <div class="show-more"><span class="js-show-more-trigger">Show More</span></div>