Adding a style using CSS works, but using JS to apply same style doesn't-CodePudding

When I add a certain class to an HTML element, the class works fine and applies the proper styling (i.e./ just adding .stn to the element in HTML). However when I repeat the same action using JS, the class applies but the styling doesn't show up (i.e/ checking using inspect element, the class is actually added to the element, but the styling doesn't show up).

I am using an IntersectionObserver to apply or remove the certain class, perhaps this is the issue and an incorrect use of the API?

Or is the nav ul li a {text-decoration: none;} css section overriding the application of the .stn class?

Thank you for looking!

let home = document.querySelector('.navHome');
let work = document.querySelector('.navWork');
let about = document.querySelector('.navAbout');

let homeTarget = document.querySelector('.home');
let homeOptions = {
  threshold: 0.4
}

let workTarget = document.querySelector('.work');
let workOptions = {
  threshold: 0.4
}

let aboutTarget = document.querySelector('.about');
let aboutOptions = {
  threshold: 0.5
}

let navHomeObserver = new IntersectionObserver(function(entries, navHomeObserver) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log(entry);
      home.classList.add('.stn');
      work.classList.remove('.stn');
      about.classList.remove('.stn');
    } else {
      return;
    };
  });
}, homeOptions);

navHomeObserver.observe(homeTarget);

let navWorkObserver = new IntersectionObserver(function(entries, navWorkObserver) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log(entry);
      home.classList.remove('.stn');
      work.classList.add('.stn');
      about.classList.remove('.stn');
    } else {
      return;
    };
  });
}, workOptions);

navWorkObserver.observe(workTarget);

let navAboutObserver = new IntersectionObserver(function(entries, navAboutObserver) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log(entry);
      home.classList.remove('.stn');
      work.classList.remove('.stn');
      about.classList.add('.stn');
    } else {
      return;
    };
  });
}, aboutOptions);

navAboutObserver.observe(aboutTarget);

nav {
  display: flex;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  align-items: center;
  justify-content: right;
  height: 100%;
  width: 10vw;
  z-index: 10000;
}

nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-type: none;
}

nav ul li:nth-child(1) {
  margin-bottom: 2rem;
}

nav ul li:nth-child(2) {
  margin-bottom: 2rem;
}

nav ul li a {
  text-decoration: none;
  font-family: sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
  color: #FF5213;
}

.stn {
  text-decoration: line-through;
  /* THIS IS THE STYLE BEING APPLIED */
}

<nav>
  <ul>
    <li><a class="navHome" href="#">Home</a></li>
    <li><a class="navWork" href="#">Work</a></li>
    <li><a class="navAbout" href="#">About</a></li>
  </ul>
</nav>

CodePudding user response：

The setting of the classes in JS is incorrect.

For example:

home.classList.add('.stn');

should be:

home.classList.add('stn');

i.e. no dot before the class name.

So, it's just that the class isn't being added/removed from those nav items.