Changing CSS when scrolling (working in console and JSFiddle but not in my HTML?)

Question

I have some weird problem:

I want to change the text color of my menu when scrolling. It is working in JSFiddle and in the console but not in my HTML...:

But changing the background when scrolling DOES work!

The thing is, that I need to override a style in SemanticUI that uses !important and I have to use .querySelector().setAttribute() instead of .getElementById().style.color because it seems to not support adding !important to a color.

Here's the link to my project (I hope npm forever will stay online long enough...)

Is there anything I'm missing? Thank you in advance!

Answer 1

You have two elements with same id #activeItem

You need to update selector to select right item:

document.querySelector('#dMenu #activeItem').setAttribute('style', 'color: #744a84 !important');

Answer 2

As mentioned in the above answer by @taras-d , you have two elements with same id. If you want to change color of both elements means you need to get all elements and apply css to it.

var _activeElements = $(".nav_bar #activeItem");
_activeElements.each(function(index) {
    _activeElements[index].setAttribute('style', 'color: #744a84 !important');
});

Add some dummy class like nav_bar to upper element to select all elements

<div class="right menu nav_bar" id="rightMenu">
...
</div>

Add nav_bar class to another #activeItem parent element, then it will iterate to all elements and apply css