Image filter not changing with Javascript

Question

I'm having a styling issue with my website. So I have 3 different sections for my navbar. First being for socials, second having my company logo, and third having web-page links.
As you can see from the first image, they're all supposed to be white and have the hover effect (this all works completely fine for the home page).

For the other three pages however I have a change of design and would like to make all my links in the navigation bar black, in doing so I have used the 'invert' feature in my css. However, when I try to change the filter for all images and links, they're split into "social-icon", "logo-white" for the company logo, and "nav-link" for the web page links. The issue I am having with it is for some reason when I click to the change the page, it only effects the 'invert' on the first image of each part (so the first social media icon, the company logo and the first web page link), as well as this, it completely takes the hover effect away from the images and links that have changed too. I've been messing around with 'foreach' statements but can't seem to get it to work at all.

//loads work page
function workPage() {
  document.getElementById("landing-page").style.display = "none";
  document.getElementById("work-page").style.display = "block";
  document.getElementById("about-page").style.display = "none";
  document.getElementById("contact-page").style.display = "none";
  document.getElementById("social-icon").style.filter = "invert(100%)";
  document.getElementById("logo-white").style.filter = "invert(100%)";
  document.getElementById("nav-link").style.filter = "invert(100%)";
}

#social-icon {
  filter: invert(0%);
  transition: filter .3s;
}

#social-icon:hover {
  filter: invert(50%);
}

<!-- navigation bar -->
<div class="nav-bar">
  <!-- socials -->
  <div class="socials-container">
    <!-- instagram -->
    <div class="social-icon-container">
      <a href="#">
        <img src="images/instaLogo.png" alt="Instagram Link" class="social-icon" id="social-icon">
      </a>
    </div>
    <!-- tiktok -->
    <div class="social-icon-container">
      <a href="#">
        <img src="images/tiktokLogo.png" alt="Tiktok Link" class="social-icon" id="social-icon">
      </a>
    </div>
    <!-- youtube -->
    <div class="social-icon-container">
      <a href="#">
        <img src="images/youtubeLogo.png" alt="YouTube Link" class="social-icon" id="social-icon">
      </a>
    </div>
  </div>
  <!-- company logo -->
  <div class="company-logo-container">
    <div class="logo-container">
      <a href="home.html">
        <img src="images/logo.png" alt="white company logo" id="logo-white">
      </a>
    </div>
  </div>
  <!-- page links -->
  <div class="page-links-container">
    <a href="#landing-page" id="nav-link" onclick="landingPage()">Home</a>
    <a href="#work-page" id="nav-link" onclick="workPage()">Work</a>
    <a href="#about-page" id="nav-link" onclick="aboutPage()">About</a>
    <a href="#contact-page" id="nav-link" onclick="contactPage()">Contact</a>
  </div>
</div>

Home page with normal filter and hover effect:

Work page with changed filter and broken hover effect:

IDs _must_ be unique within an HTML document. Use a class instead, if you have to select multiple elements. — CBroe, Feb 25 '22 at 14:28
I have used the line: document.getElementsByClassName("social-icon").style.filter = "invert(100%)"; and it didn't work... like... idk what more I'm supposed to do lol — Mathew Palmer, Feb 25 '22 at 15:02
When I look in the console log it says "Cannot set properties of undefined (setting 'filter')" — Mathew Palmer, Feb 25 '22 at 15:05
getElement**s**ByXxx will return a list of elements, not one. The list won't have a `style` on its own, and therefore `filter` on the undefined `style` will throw. See [What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — CherryDT, Feb 25 '22 at 15:31
I tried that too but it didn't seem to work for me either, the only solution I found was to make give the nav-bar an ID and then to change the filter on the whole bar. Thanks for the help though, it's much appreciated! — Mathew Palmer, Feb 25 '22 at 15:51

score 0 · Accepted Answer · answered Feb 25 '22 at 15:25

0

im not a fan of inline css so try this:

let elements = document.querySelectorAll('.social-icon')
elements.forEach((el) =>{el.classList.add('filter')})

and add in css:

.social-icon.filter{invert(100%)}

or if you want to use inline styles:

document.querySelectorAll('.social-icon').forEach((el) =>{el.style.filter = "invert(100%)"})

answered Feb 25 '22 at 15:25

Kowalkox

109
5

I tried that too but it didn't seem to work for me either, the only solution I found was to make give the nav-bar an ID and then to change the filter on the whole bar. Thanks for the help though, it's much appreciated! – Mathew Palmer Feb 25 '22 at 15:51
that's strange, because i tried my solution and it works just fine – Kowalkox Feb 25 '22 at 16:44
Oh... I find that very strange indeed, I apologise, I have no idea why it didn't work for me... – Mathew Palmer Feb 25 '22 at 18:21

Image filter not changing with Javascript

1 Answers1