Get Element By Classname Script Not Working

Question

I know, it's not supported by IE, but I found a cool script online that someone was generous enough to provide for free, but I can't figure out why it's not working. I've been staring at this for hours, please point me in the right direction!

My code:

<script language="javascript" type="text/javascript" src="getbyclass.js"></script>
<script type="text/javascript" language="javascript">
function editToggle(toggle){
    if (toggle == "off"){
    getElementsByClassName("editp").style.display ="none";
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"off\"); return false;\">>Edit Mode: <span style=\"color:red;\">OFF</span></a>";
    toggle="on";
    }else{
    getElementsByClassName("editp").style.display ="inline";
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"on\"); return false;\">>Edit Mode: <span style=\"color:green;\">on</span></a>";
    toggle="off";
    }
}

also:

echo "<span id=\"editToggle\"><a href=\"#\" onclick=\"editToggle(); return false;\">Edit Mode: <span style=\"color:red;\">OFF</span></a></span>";

The code from getbyclass.js can be seen here.

---

In response to the answers below, I've tried this:

function editToggle(toggle){
    var list = getElementsByClassName("editp");
    if (toggle == "off"){
    //getElementsByClassName("editp").style.display ="none";
        for (index = 0; index < list.length; ++index) {
            list[index].style.display ="none";
        }
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"off\"); return false;\">>Editfalse;\">Edit Mode: <span style=\"color:red;\">OFF</span></a>";
    toggle="on";
    }else{
    //getElementsByClassName("editp").style.display ="inline";
        for (index = 0; index < list.length; ++index) {
            list[index].style.display ="inline";
        }
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"on\"); return false;\">>Editfalse;\">Edit Mode: <span style=\"color:green;\">on</span></a>";
    toggle="off";
    }
}

But it's still not working.

Dumont

Where exactly is the code breaking? if you console.log/alert the contents of getElementsByClassName("editp") what do you see (in both a modern browser and IE7)? Also, rather than using toggle = "on"/"off" and checking the string value, use a boolean, that's what they're for: ie toggle = true and then if(toggle) – Anemology

Also, what do you mean by 'not working'? Perhaps create a jsfiddle? – Kilter

It does absolutely nothing. At all. – Dumont

@Adelphia: It's not appropriate to edit the code in the question in response to answers. You can add a note to the end of the question if you like, but modifying the code makes the question useless to people coming later, and makes the answers look a bit non-sensical. I've fixed it for you this time. – Dyandyana

Answer 1

getElementsByClassName returns a collection. You might need to loop through the results, like this:

var elements = document.getElementsByClassName('editp');
for(var i=0; i<elements.length; i++) { 
  elements[i].style.display='none';
}

• elements is a live NodeList of found elements in the order they appear in the tree.
• names is a string representing the list of class names to match; class names are separated by whitespace
• getElementsByClassName can be called on any element, not only on the document. The element on which it is called will be used as the root of the search.

Should go through this.

Valerio

Answer 2

getElementsByClassName returns a NodeList (or an array if it's not built-in), but you're using it as though it were an HTMLElement by referring directly to a style property on it:

getElementsByClassName("editp").style.display ="none";
// here ------------------------^

You should be seeing an error in the JavaScript console, since you're trying to retrieve the property display from undefined (since getElementsByClassName("editp").style will be undefined).

If you want to act on the first matching element:

var elm = getElementsByClassName("editp")[0];
if (elm) {
    elm.style.display ="none";
}

...or if you want to act on all of them:

var index;
var list = getElementsByClassName("editp");
for (index = 0; index < list.length; ++index) {
    list[index].style.display ="none";
}

---

Update:

At some point, you edited the question and removed var toggle = "off" from the code (at global scope, just above the function) and made toggle an argument to editToggle. But you're not passing anything into editToggle according to your quoted markup, and even if you were, setting toggle to a new value within the function won't have any lasting effect if it's a function argument, as nothing refers to it after the function returns.

Dyandyana

I tried exactly what you said, see edit^ still nothin' :/ UGH! – Dumont

@Adelphia: Then there's something else wrong elsewhere, in code you haven't shown. This is basic debugging, even IE has a built-in debugger now. There's no substitute for using it. – Dyandyana

Answer 3

There may be unterminated string literals in the markup you create. It also appears there may be other issues as mentioned in other posts.

Change:

 "<a href=\"#\">Edit Mode: <span style=\"color:red;>OFF</span></a>";

to

"<a href=\"#\">Edit Mode: <span style=\"color:red;\">OFF</span></a>";

This situation is also present in the other markup you create.

Change:

"<a href=\"#\">Edit Mode: <span style=\"color:green;>on</span></a>";

to

"<a href=\"#\">Edit Mode: <span style=\"color:green;\">on</span></a>";

Wailoo

Answer 4

You seem to have a missing semicolumn after var toggle="off".

Make sure that you call editToggle() somewhere in your code.

I advise you to use inspectors built into browsers or extensions. For example Firebug extension for Firefox or Chrome Inspector. Use the console to debug and see if there are errors in your javascript.

Joung