Select all elements using getElementsByClassName in a function, not working

Question

I have a simple "fade out text on scroll" effect using Javascript.

Here's a working fiddle: https://jsfiddle.net/4opjh5ef/1/

I wanted to let the effect applied to all elements with the class fade . However, trying to loop it inside the function doesn't seem to work.

Here is the not working code:

 var fadeOut = document.getElementsByClassName('fade'); var fadeOutParent = fadeOut.parentElement.scrollHeight; function scrolled() { for (var i = 0; i < fadeOut.length; i++) { fadeOut[i].style.opacity = 1-((window.pageYOffset)/(fadeOutParent/2)); } } window.addEventListener('scroll', scrolled);

Any idea?

Answer 1

You should have different fadeOutParent for each element because each element have different parent. You should assign fadeOutParent inside the loop

 var fadeOut = document.getElementsByClassName('fade'); function scrolled() { for (var i = 0; i < fadeOut.length; i++) { var fadeOutParent = fadeOut[i].parentElement.scrollHeight; fadeOut[i].style.opacity = (1-((window.pageYOffset)/(fadeOutParent/2))) } } window.addEventListener('scroll', scrolled);

 body { margin: 0; height: 1000px; font-family: sans-serif; color: #333; } .content { padding: 10%; } p { line-height: 1.75; } .top { margin: 0; position: relative; width: 100%; background-color: #aaa; height: 300px; opacity: 1; text-align: center; font-family: 'helvetica'; color: #fff; } .title { font-size: 100px; font-weight: 700; font-size: 100px; font-weight: 700; position: absolute; top: 60%; left: 100px; /* gak perlu, udah cukup smooth transition: opacity 0.5s ease; */ } .span { font-size: 50px; font-weight: 300; position: absolute; top: 77%; right: 100px; }

 <div class="container"> <div class="top" id="top"> <div class="title fade" id="title"> Fade Away </div> <div class="span fade"> Subtitle </div> </div> <div class="content"> <p> What's scrolling is actually .content, not body. </p> <p> White paper segmentation families granular big data dynamic natural resources energize, vibrant families social return on investment human-centered radical. Inclusive philanthropy design thinking agile, we must stand up ecosystem; support social impact efficient game-changer ecosystem and correlation shared value. Ideate state of play technology circular, disrupt innovation paradigm movements change-makers. Natural resources triple bottom line bandwidth movements venture philanthropy incubator energize effective problem-solvers uplift. Greenwashing we must stand up segmentation, program area; resilient venture philanthropy, academic expose the truth entrepreneur activate transparent venture philanthropy empower communities deep dive. NGO collective impact synergy initiative, bandwidth, storytelling revolutionary inspiring, our work segmentation. </p> <p> Deep dive the resistance, problem-solvers impact investing social entrepreneur indicators inspiring energize. Boots on the ground our work systems thinking think tank innovation. Green space catalyze blended value sustainable empower communities thought partnership. </p> <p> NGO disrupt, expose the truth save the world, black lives matter challenges and opportunities thought leader movements efficient theory of change cultivate activate strategy LGBTQ+. Paradigm; emerging because, a; social enterprise strategy accessibility. Design thinking, segmentation; relief, justice her body her rights gender rights. Catalyze parse inclusion thought leader, overcome injustice, expose the truth collective impact silo ideate. </p> <p> Transparent benefit corporation social impact data families scale and impact social capital a shared unit of analysis. Uplift dynamic; movements, co-creation, co-create, expose the truth segmentation data technology collaborate, academic cultivate collective impact accessibility. Benefit corporation theory of change, entrepreneur venture philanthropy move the needle, indicators, segmentation co-creation revolutionary revolutionary co-create deep dive gender rights. NGO initiative; vibrant; our work inspire; inspire communities, rubric, gender rights collaborate gender rights data deep dive. </p> <p> To innovate outcomes justice benefit corporation, policymaker impact investing. Equal opportunity green space empower communities strategy, co-create compelling, gender rights shared vocabulary shared value transparent. Uplift, NGO resist, vibrant, mass incarceration collaborative cities vibrant and. Shared vocabulary paradigm, boots on the ground program areas change-makers, corporate social responsibility data strategy because replicable expose the truth human-centered. Program area storytelling social innovation preliminary thinking social innovation storytelling correlation. Then; ecosystem granular impact impact expose the truth outcomes but entrepreneur movements. </p> </div> </div>

I would suggest you to use querySelectorAll() instead of getElementsByClass()

Answer 2

Your problem is that you're trying to select the parentElement of a NodeList , which isn't possible.

Here, try moving the fadeOutParent variable into the for loop instead:

var fadeOut = document.getElementsByClassName("fade");
function scrolled() {
  for (var i = 0; i < fadeOut.length; i++) {
    var fadeOutParent = fadeOut[i].parentElement.scrollHeight;
    fadeOut[i].style.opacity = 1 - ((window.pageYOffset) / (fadeOutParent / 2));
  }
}
window.addEventListener("scroll", scrolled);

Good luck.