Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    Unable to change class value via dom

    This is the line in my html...

    <i id="displayMenuIcon" class="fa fa-bars"></i></a>



    and this is my JS that I have tried to get the icon to toggle.

    var toggle= 1;
    startIt();

    function startIt() {
    var icon = document.getElementById("displayMenuIcon");
    // alert(icon.class);
    if (toggle> 2) {toggle= 1}
    if (toggle== 1) {
    icon.class = 'fa-bars';
    // alert(1);
    } else {
    icon.class = 'fa-paw';
    // alert(2);
    }
    toggle++;
    setTimeout(startIt, 2000); // Change image every 2 seconds
    }

    As far as I can tell all works as I tried it with the alerts and it shows them ok, but I can not get the class value to change. It does show the content of the class in the first alert but it does not get changed. Can someone see what am I missing or doing wrong?

  2. #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,406
    Thanks
    3
    Thanked 594 Times in 580 Posts
    Hi there jasonpc1,

    try it like this...

    Code:
    
    <script>
    (function( d ) {
        'use strict';
        var  icon = d.getElementById( 'displayMenuIcon' ),delay = 2000;
    
    function startIt() {
    if ( icon.classList == 'fa fa-bars' ) {
         icon.classList.remove ( 'fa-bars' );
         icon.classList.add ( 'fa-paw' );
       } else {
         icon.classList.remove ( 'fa-paw' );
         icon.classList.add ( 'fa-bars' );	
       }
     }
         setInterval( startIt, delay ); 
    }( document ));
    </script>
    

    coothead
    Last edited by coothead; Jul 11th, 2018 at 11:22 PM.
    ~ the original bald headed old fart ~

  3. #3
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,217
    Thanks
    4
    Thanked 470 Times in 458 Posts
    Sorry, late to the party -- coothead has it right that you should use classList IF you can get away with only supporting modern browsers, but beware that prior to IE 10 it doesn't exist and even IE 11's support is buggy. If you're coding with IE support, don't use it.

    Classlist can also be painfully SLOW because it is a JavaScript iterable -- like an array. That means under the hood it's a pointered list which can introduce all sorts of painful slowdowns.

    What was REALLY biting you is that you tried to call it 'class'. It IS called 'class' if you use getAttribute and setAttribute, but as a direct property it's called "className"

    Just like as in "getElementByClassName"

    If you had written it as:

    Code:
    var toggle = 1;
    startIt();
    
    function startIt() {
    	var icon = document.getElementById("displayMenuIcon");
    	icon.className = toggle & 1 ? 'fa-bars' : 'fa-paw';
    	toggle++;
    	setTimeout(startIt, 2000); // Change image every 2 seconds
    }
    It would have worked fine, well apart from the class "fa" being ERASED since you're setting ALL the classes.

    Remember that using className, it's ALL the values so if you had it as:

    class="fa fa-bars"

    setting:

    icon.className = 'fa-paw';

    changes it to JUST "fa-paw" losing the "fa " part.

    Hence why prior to classList helper functions were commonplace to facilitate changing just one class or adding classes safely. Laughably such helpers are STILL faster than the native functions in most cases, even when they rely on regular expressions. Again JavaScript iterable/array-likes are just slow as molasses in February

    OH, also beware that on XML structures, like SVG inside HTML, it IS called class. In that case you're better off relying on Element.getAttribute and Element.setAttribute set to 'class' than you are using Element.className. "corner cases" like that will bite you in the *** every blasted time.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •