replacing a class element with javascript

Question

I am trying to update a class when the user arrives on the web page. I am having trouble getting the script to work on my end. When a user arrives on the page and the link has a specific has, then I would like to update/add the href with a class of 'active', otherwise, I want to remove 'active' from the class if it is already present.

I tried the following script, I am getting the existing hash and if the hash is not null, then I want to make the change; the script is failing with an error: 'Cannot read property 'classList' of null'

const serv = document.getElementById('serv')                
var hash = window.location.hash;
hash = hash.slice(1);  
if (hash !== '') {
   serv.classList.add('active');
} else {
   serv.classList.remove('active');
}

<a id="serv" class="nav-link scrollto " href="~/#services">Services</a>

Spectric · Accepted Answer · 2021-04-20 15:53:05Z

2

The element probably hasn't been loaded when you tried selecting it. Try selecting it only after all the elements have been loaded.

window.addEventListener('DOMContentLoaded', (event) => {
  const serv = document.getElementById('serv')
  var hash = window.location.hash;
  hash = hash.slice(1);
  if (hash !== '') {
    serv.classList.add('active');
  } else {
    serv.classList.remove('active');
  }
});

<a id="serv" class="nav-link scrollto " href="~/#services">Services</a>

answered Apr 20, 2021 at 15:53

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sultan Singh Atwal Over a year ago

This is the most probable reason. Another approach to tackle the same problem is to add the 'defer' attribute to the script tag that loads the JS file. This ensures that the JS runs after the DOM has been loaded.

Collectives™ on Stack Overflow

replacing a class element with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related