Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. English
    3. Scripting / Logic
    4. JavaScript
    5. Check if an element contains a class in JavaScript?

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Check if an element contains a class in JavaScript?

    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      roshan.sharma last edited by roshan.sharma

      Hi
      I'm not a big fan of dynamic programming languages, although I've written a lot of JavaScript code. I never quite understood the concept of prototype-based programming; does anyone know how it works?
      I was working on a JavaScript project with the source checking if an element contains a class.
      I'm currently doing this:

      code_text
      var test = document.getElementById("test");
      var testClass = test.className;
      
      switch (testClass) {
        case "class1":
          test.innerHTML = "I have class1";
          break;
        case "class2":
          test.innerHTML = "I have class2";
          break;
        case "class3":
          test.innerHTML = "I have class3";
          break;
        case "class4":
          test.innerHTML = "I have class4";
          break;
        default:
          test.innerHTML = "";
      }
      <div id="test" class="class1"></div>
      

      The problem is when I change the HTML code to...
      <div id="test" class="class1 class5"></div>
      There is no longer an exact match, so I get the standard output of nothing (""). But I still want the output to be I have class1 because <div> still contains class .class1 .
      Can someone help me

      liv-in-sky OliverIO 2 Replies Last reply Reply Quote 0
      • liv-in-sky
        liv-in-sky @roshan.sharma last edited by

        @roshan-sharma

        I have tried this in a standard html widget:

        Image 057.png

        <div id="test" class="class1 class3"></div>
        
        <script>
        var test = document.getElementById("test");
        var testClass = test.className;
        console.log(test.className);
        console.log(test.getAttribute('class'));
        
         
        switch (testClass) {
          case "class1":
            test.innerHTML = "I have class1";
            break;
          case "class2":
            test.innerHTML = "I have class2";
            break;
          case "class3":
            test.innerHTML = "I have class3";
            break;
          case "class4":
            test.innerHTML = "I have class4";
            break;
          default:
            test.innerHTML = "";
        }
        
        if (test.classList.contains("class3")) {console.log("with class3");
                                                test.innerHTML = "I have class3";}
        if (test.classList.contains("class1")) {console.log("with class1");
                                                test.innerHTML += "<br> I have class1";}
        
        
        
        </script>
        
        
        

        the result is:

        Image 056.png

        the problem is the switch command !

        1 Reply Last reply Reply Quote 0
        • OliverIO
          OliverIO @roshan.sharma last edited by OliverIO

          @roshan-sharma

          better is to use jquery

          https://api.jquery.com/hasclass/

          var test = $("#test");
          if ($(test).hasClass("class1")) {
             $(test).html("I have class1");
          }
          if ($(test).hasClass("class2")) {
             $(test).html("I have class2");
          }
          

          jquery is in vis already loaded

          1 Reply Last reply Reply Quote 0
          • First post
            Last post

          Support us

          ioBroker
          Community Adapters
          Donate

          906
          Online

          31.8k
          Users

          80.0k
          Topics

          1.3m
          Posts

          3
          3
          346
          Loading More Posts
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes
          Reply
          • Reply as topic
          Log in to reply
          Community
          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
          The ioBroker Community 2014-2023
          logo