Search code examples
javascriptjquerygetelementsbyname

Error while selecting allElementsByID and adding a class to them


Hello I'm trying to add a class to all of my elements on a webpage. The overall goal is to grab all the elements on a webpage and add in a class. The class containing a font size will be changed to hide a message.

I'm getting this error Uncaught TypeError: Cannot set property 'innerHTML' of null

I've tried moving my script outside the body tag of my index.html but its still not working.

Another problem is I can't add a class to all of the IDs I'm selecting. I can add classes manually like

$("#iconLog").addClass("style"); //this works

but when I try to add a class like this

empTwo = "#" + temp;    //where empTwo is a string that equals "#iconLog"   
$("empTwo").addClass("style") //this does not work

I'll post my entire script below for reference

$(function() {

    var hideMsg = "f";
    var n = hideMsg.length;

    var i;
    var j;
    var holder;
    var hideHolder;

    // on button click - hide msg
    $('#btnHide').on('click', function() {

        //grab all IDS ON WEBPAGE

        var allElements = document.getElementsByTagName("*");
        var allIds = [];
        for (var i = 0, n = allElements.length; i < n; ++i) {
          var el = allElements[i];
          if (el.id) { 
              allIds.push(el.id);
           }
        }

        //ERRORS HAPPENING IN THIS LOOP
        for(var i = 0; i < allElements.length; ++i)
        {
            console.log(allIds[i]);
            try{
                var temp = document.getElementById(allIds[i]).id;
            }
            catch(err){
                document.getElementById("*").innerHTML = err.message;
            }

            tempTwo = "#" + temp;
            console.log(tempTwo);

            //$("#iconLog").addClass("style") //this works
            $("tempTwo").addClass("style"); //this does not work
        }

        for(i = 0; i < n; i++) {

            //set var holder to first value of the message to hide
            holder = hideMsg.charCodeAt(i);

            for(j = 7; -1 < j; j--) {

                //set hideHolder to holders value
                hideHolder = holder;
                //mask hideHolder to grab the first bit to hide
                hideHolder = hideHolder & (1<<j);

                //grab the first element ID

                if(hideHolder === 0) {

                    // embed the bit
                    // bitwise     &= 

                } else {    
                    //embed the bit
                    // bitwise ^=
                }   
            }   
        }
    });

});

Solution

  • To add a class to all elements you don't need a for loop. Try this:

    $("*").addClass("style");
    

    Same for setting the inner html of all elements. Try this:

    $("*").html("Html here");