Question 43565 in Html Question posted in
Some basic documentation can be found here.

How do I make a function that checks if an element has a certain class and if true, runs a separate function? – Html

I’m making a site for me to experiment and go out of my comfort zone and I’m trying to add a button that runs a different function based on whether or not it’s in dark or light theme using javaScript. I want it to work like this:

if elementClass == "dark" 
run function 1
else if elementClass == "light" 
run function 2

This is my current code
html:
<button id="fullscreen" class="fullscreen dark" onclick='checkClass()'> Fullscreen </button>

script:

function checkClass() {
    if ($('.fullscreen').hasClass('dark') === true) {
        openFullscreenDark()    
    } else if ($('.fullscreen').hasClass('light') === true){
        openFullscreenLight()   
    }
}

The openfullscreen functions are working, however I don’t know how to properly check for classes as well as run a function in a function.

The if statements I found in another post and I don’t know how to use jQuery.

Is this possible to do? If so how?

Edit: the code I added didn’t work, that’s why I came for help.

Tags:

4

Answers


  1. 0

    Not sure what exactly your issue is here, your code is in general correct. Maybe checking the documentation for hasClass will help?

    Alternatively you can use the pure-JS solution – classList, so the code will look like so:

      function checkClass() {
    const button = document.querySelector('.fullscreen'); // Get the button with fullscreen class
    if (button.classList.contains('dark')) { // Check if the button element has 'dark' class
      openFullscreenDark();
    } else if (button.classList.contains('light')) { // Check if the button element has 'light' class
      openFullscreenLight();
    }
  }
    Login or Signup to reply.
  2. 0

    You can rewrite the checkClass() function with vanilla JS like this:

    function checkClass() {
    if (document.querySelector('.fullscreen').classList.contains('dark') === true) {
        openFullscreenDark()    
    } else if (document.querySelector('.fullscreen').classList.contains('light') === true){
        openFullscreenLight()   
    }
}

    Since contains() returns a boolean, you can also simplify it to:

    function checkClass() {
    if (document.querySelector('.fullscreen').classList.contains('dark')) {
        openFullscreenDark()    
    } else if (document.querySelector('.fullscreen').classList.contains('light')){
        openFullscreenLight()   
    }
}

    Since you are only checking one element, you could also use getElementById() like this:

    function checkClass() {
    if (document.getElementById('fullscreen').classList.contains('dark')) {
        openFullscreenDark()    
    } else if (document.getElementById('fullscreen').classList.contains('light')){
        openFullscreenLight()   
    }
}

    As you can see, there are many different ways to do this in vanilla JS, but they all do the same thing.

    Login or Signup to reply.
  3. 0

    This can easily be achieved using vanilla Javascript, but your code looks fine as is, that said, here is another solution which might make things clearer for you:

    Simplified HTML:

    <button
    id="fullscreen"
    class="fullscreen dark"
    type="button"
>
    Fullscreen
</button>

    function openFullscreenDark() {
    // doing something...
}

function openFullscreenLight() {
    // doing something...
}

function openThemedFullscreen() {
    // first get the element
    // this could also be "document.getElementById( 'fullscreen' );
    // or "document.querySelector( '#fullscreen' );"
    const fullscreenElement = document.querySelector( '.fullscreen' );
    
    // check if it exists, handle it somehow
    if ( !fullscreenElement ) {
        return;
    }

    // check if the element has the "dark" class
    if ( fullscreenElement.classList.contains( 'dark' ) {
        openFullscreenDark();
    } else {
        openFullscreenLight()   
    }
}
    Login or Signup to reply.
  4. 0 
    let fullscreen = document.getElementById("fullscreen");

    Select the html element to use it on JS, make it easier to debug

    function setDark() {
  document.body.style.backgroundColor = "black";
  fullscreen.classList.remove("dark");
}
function setWhite() {
  document.body.style.backgroundColor = "white";
  fullscreen.classList.add("dark");
}

    Those functions set the color of the element body and change the class so we can use the same button to set it to dark or light

    function setFullScreen() {
  fullscreen.classList.contains("dark") ? setDark() : setWhite();
}
fullscreen.addEventListener("click", setFullScreen);

    Is good to use ternary operator in cases like of "Yes or No"
    Condition is true (if yes do this) : (if no do this)

    One other way to solve that problem

    const fullscreen = document.getElementById("fullscreen");

// function1, use alert("Open dark") to test it
// function2 alert("Open light") to test it

// Now the same problem using parameters, it allows you to be more dynamic, in my opinion

function setFullScreen(e) { 
  // (here the e is a parameter)
  const button = e.target.classList; //(here the e is an argumet)  this line will check the whole class of the clicked element and assign it to button
  if (button.contains("dark")) {
    // function
  } else {
    // function
  }
}

fullscreen.addEventListener("click", setFullScreen);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search