Question

What do you do to change a javascript from a ID to a Class? I tried to do it on my own but with no luck, this is what I ended up with. The original code was to show or hide an element and remember the users selection.

HTML:

<div class="popup" style="display:none">
    <img src="image-url.jpg" alt="alt text" title="title text">
</div>

JAVASCRIPT:

function setCookie (name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}

function getCookie (name) {

    var cookie = " " + document.cookie;
    var search = " " + name + "=";
    var setStr = null;
    var offset = 0;
    var end = 0;

    if (cookie.length > 0) {
        offset = cookie.indexOf(search);

        if (offset != -1) {
            offset += search.length;
            end = cookie.indexOf(";", offset);

            if (end == -1) {
                end = cookie.length;
            }

            setStr = unescape(cookie.substring(offset, end));
        }
    }

    if (setStr == 'false') {
        setStr = false;
    } 

    if (setStr == 'true') {
        setStr = true;
    }

    if (setStr == 'null') {
        setStr = null;
    }

    return(setStr);
}

function hidePopup() {
    setCookie('popup_state', false); 
    document.getElementsByClassName('popup').style.display = 'none';
}

function showPopup() {
    setCookie('popup_state', null);
    document.getElementsByClassName('popup').style.display = 'block';
}

function checkPopup() {
    if (getCookie('popup_state') == null) { 
        // if popup was not closed
        document.getElementsByClassName('popup').style.display = 'block';
    }
}

Answer 1

document.getElementsByClassName gives you back a NodeList. And a NodeList doesn’t have a style property that’s useful…all it has is length, and indexes for each node in the list.

In order to set the style of every popup that was found, you should iterate through the NodeList. For example:

function showPopups() {
    setCookie('popup_state', null);
    var popups = document.getElementsByClassName('popup');
    for (var i = popups.length - 1; i >= 0; --i) {
        popups[i].style.display = '';
    }
}

Of course, to hide them, you’d set the display to none instead.

If you know you’ll only have one element to change, (1) why aren’t you using an ID? 🙂 but (2) you can just say document.getElementsByClassName('popup')[0] to access the one element. Note, though…if you ever have more than one, you’ll only change the first one that way.