CODEWITHSUNDEEP
javascripthtmlcss
Devin
Devin

Reputation: 1

GetElementsByClass for all href link tag

Currently i am trying with Javascript to change the font color from a <a> tag it needs to happen when you scroll down the color changes from white to black but i have been struggling that when you scroll down it only changes one <a> tag to black and the rest stays white.

This is a short code how my nav is like:

    <div class="rc_nav" id="centered_nav">
        <a href="#home" class="link1">Home</a>
        <a href="#services" class="link1">Services</a>
        <a href="#about" class="link1">About</a>
        <a href="#contact" class="link1">Contact</a>
        <a href="javascript:void(0);" title="Menu" style="font-size:18px;" class="icon" onclick="myFunction()">&#9776;</a>
    </div>

And this is how my javascript looks like

const nav = document.getElementById('centered_nav');
const logo = document.getElementById('rc_logo');
const link = document.getElementsByClassName('link1')[0];

window.onscroll = function(){

    if (window.pageYOffset > 100) {

        nav.style.background = "#FFFFFF";
        nav.style.boxShadow = "0px 2px 1px #E55200";
        link.style.color = "#000000";
        logo.style.backgroundImage = "url('http://localhost/assets/img/nav-logo-color.png')";
    }
    else {
        nav.style.background = "transparent";
        nav.style.boxShadow = "none";
        link.style.color = "#FFFFFF";
        logo.style.backgroundImage = "url('http://localhost/assets/img/nav-logo.png')";
    }
}

I have done some research because i am not that familiar with Javascript but without any results. Any ideas anyone?

Upvotes: 0

Views: 59

Answers (2)

Kinglish
Kinglish

Reputation: 23654

The direct answer is that you're affecting many links, not one, so you need to create a collection and iterate through it with something like forEach. In your code you were using document.getElementsByClassName('link1')[0]; which is just the FIRST link.

const nav = document.getElementById('centered_nav');
const logo = document.getElementById('rc_logo');
const links = document.getElementsByClassName('link1');

window.onscroll = function(){
    if (window.pageYOffset > 100) {
        nav.style.background = "#FFFFFF";
        nav.style.boxShadow = "0px 2px 1px #E55200";
        links.forEach(link => link.style.color = "#000000" );
        logo.style.backgroundImage = "url('http://localhost/assets/img/nav-logo-color.png')";
    }
    else {
        nav.style.background = "transparent";
        nav.style.boxShadow = "none";
        links.forEach(link => link.style.color = "#ffffff" );
        logo.style.backgroundImage = "url('http://localhost/assets/img/nav-logo.png')";
    }
}

The better answer is to just set a single class on body perhaps, and then have your css rules do the rest. You can even add transitions this way which will allow you to animate the transition from white to black etc. I put the transition rules in here, you can remove if desired.

const body = document.querySelector('body');
window.onscroll = function() {
  if (window.pageYOffset > 100) body.classList.add('scrolled')
  else body.classList.remove('scrolled')
}

The css:

#rc_logo {
  background-image: url('http://localhost/assets/img/nav-logo.png');
}
#centered_nav {
  background: transparent;
  box-shadow: none;
  transition: background .5s linear .5s;
}
.link1 {
  color: #fff;
  transition: background .5s linear .5s;
}

body.scrolled #rc_logo {
  background-image: url('http://localhost/assets/img/nav-logo-color.png');
}
body.scrolled #centered_nav {
  background: #000;
  box-shadow: 0px 2px 1px #E55200;
  transition: background .5s linear .5s;
}
body.scrolled .link1 {
  color: #000;
}

Upvotes: 1

Unmitigated
Unmitigated

Reputation: 89294

You can use document.querySelectorAll to get all the anchor elements and loop over them to set the color. (Note that document.querySelectorAll is preferred over document.getElementsByClassName because the returned collection is not live.)

const nav = document.getElementById('centered_nav');
const logo = document.getElementById('rc_logo');
const links = document.querySelectorAll('.link1');

window.onscroll = function(){

    if (window.pageYOffset > 100) {

        nav.style.background = "#FFFFFF";
        nav.style.boxShadow = "0px 2px 1px #E55200";
        links.forEach(link => link.style.color = "#000000");
        logo.style.backgroundImage = "url('http://localhost/assets/img/nav-logo-color.png')";
    }
    else {
        nav.style.background = "transparent";
        nav.style.boxShadow = "none";
        links.forEach(link => link.style.color = "#FFFFFF");
        logo.style.backgroundImage = "url('http://localhost/assets/img/nav-logo.png')";
    }
}

Upvotes: 1

Related Questions