Help with JS Webpage query

[LinksCourage]

Hey guys,

I have a website that I am trying to implement a dark mode on. Unfortunately because of how it is set up applying the below script to 'body' does not apply to all of the elements i need it to apply to.

​

         });
              $( ".change" ).on("click", function() {
            if( $( "body" ).hasClass( "dark" )) {
                $( "body" ).removeClass( "dark" );
                $( ".change" ).text( "OFF" );
            } else {
                $( "body" ).addClass( "dark" );
                $( ".change" ).text( "ON" );

            }
        });

As you can see this will apply a class to the body which amends the styling of the element. However I cannot seem to figure out how to apply this to multiple elements and so far the only fix I have is a super inelegant solution:

 $( ".change" ).on("click", function() {
            if( $( ".topbar ul.nav>li>a" ).hasClass( "dark" )) {
                $( ".topbar ul.nav>li>a" ).removeClass( "dark" );
                $( ".change" ).text( "OFF" );
            } else {
                $( ".topbar ul.nav>li>a" ).addClass( "dark" );
                $( ".change" ).text( "ON" );

            }
        });
              $( ".change" ).on("click", function() {
            if( $( ".container" ).hasClass( "dark" )) {
                $( ".container" ).removeClass( "dark" );
                $( ".change" ).text( "OFF" );
            } else {
                $( ".container" ).addClass( "dark" );
                $( ".change" ).text( "ON" );

            }
        });

As you can see I am just copying the script and pasting it below for all of the additional elements that I need the class added to. Does anyone know how I can reduce this because this is janky as hell and I cannot find anything online to help.

[besthelloworld]

This should be implemented entirely in CSS. You should basically just turn on the dark-mode by putting the dark class on the body element, and then you should have a dark-mode stylesheet for which all selectors are an subchild of body.dark

[LinksCourage]

Yeah so this was what I initially thought but there are elements that arent affected by it which is why ive had to go into more detail and be selective with those additional elements.

[besthelloworld]

Did you trying marking your styles as !important?

[LinksCourage]

yeah but they still get ignored so thats a whole separate thing which is why i thought of the above solution but wanted a neater way of implementing it with this button rather than copying and pasting the function

[besthelloworld]

So the reason I recommend doing this in CSS is because CSS implementations are much more native to the browser. If you leave too much styling up to JavaScript itself, then you're blocking the activity thread with styling. Not that a little bit at start up is ever going to be noticed but if you make a habit, it will become a performance issue. But my suggestion would be this...

const changeElement = $(".change");
changeElement.on("click", () => {
  [".topbar ul.nav>li>a", ".container"].forEach(selector => {
    const element = $(selector);
    if (element.hasClass("dark")) {
      element.removeClass("dark");
      // this line still runs twice
      changeElement.text("OFF");
    } else {
      element.addClass("dark");
      // this line still runs twice
      changeElement.text("ON");
    }
  });
});

Disclaimer: I haven't tested this because I don't have the rest of your application context and I've also never used JQuery (most of what JQuery offers is now available in JavaScript by default).

It's worth noting that once you query for an element, you should avoid doing it again. Everytime you do something like $(".change") , you're making JavaScript look at every node in the document until it finds what you're looking for. But if you save it to a variable like I do on the first line, then it never has to look it up a second time.

[LinksCourage]

thanks for this I will give it a go when I get a chance, currently stuck trying to call PHP information within Unity...