I am trying to get the innerhtml of class name current_page_item[0]... And this is working fine in FF and even in IE9 also. But in IE 8 it seems to be some javascript error in line" var classelem=document.getElementsByClassName('current_page_item')[0].innerHTML;.
I tried to put alert after the above line. But it is not displaying the message "Hello again".
Any idea how to solve the browser issue for this? Is it something that document.getElementsByClassName wont work in IE8?
<html>
<head>
<script type="text/javascript">
function updatesidebar()
{
alert("Hello");
var classelem=document.getElementsByClassName('current_page_item')[0].innerHTML;
alert("Hello again");
}
</script>
</head>
<body>
<div id="main">
<div class="menu_main">
<ul class='mainmenu' id='root'>
<li><a href="/home" class="">Home</a></li>
<li><a href="/solutions" class="">Solutions</a>
</li><li><a href="/services" class="">Services</a></li>
<li><a href="/about-us" class="current_page_item">About Us</a></li>
<li><a href="/news" class="">News and Events</a></li>
<li><a href="/careers" class="">Careers</a></li>
<li><a href="/contact-us" class="">Contact Us</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload=updatesidebar();
</script>
</body>
</html>
I am trying to get the innerhtml of class name current_page_item[0]... And this is working fine in FF and even in IE9 also. But in IE 8 it seems to be some javascript error in line" var classelem=document.getElementsByClassName('current_page_item')[0].innerHTML;.
I tried to put alert after the above line. But it is not displaying the message "Hello again".
Any idea how to solve the browser issue for this? Is it something that document.getElementsByClassName wont work in IE8?
<html>
<head>
<script type="text/javascript">
function updatesidebar()
{
alert("Hello");
var classelem=document.getElementsByClassName('current_page_item')[0].innerHTML;
alert("Hello again");
}
</script>
</head>
<body>
<div id="main">
<div class="menu_main">
<ul class='mainmenu' id='root'>
<li><a href="/home" class="">Home</a></li>
<li><a href="/solutions" class="">Solutions</a>
</li><li><a href="/services" class="">Services</a></li>
<li><a href="/about-us" class="current_page_item">About Us</a></li>
<li><a href="/news" class="">News and Events</a></li>
<li><a href="/careers" class="">Careers</a></li>
<li><a href="/contact-us" class="">Contact Us</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload=updatesidebar();
</script>
</body>
</html>
- but it works fine in IE9... so you mean to say IE8 wont support getelementsbyclassname?? – rubyist Commented May 17, 2011 at 13:21
- Yeah I8 doesn't support HTML5, so that method wont work in IE8. You could assign the id of "current" to the current page and use getElementById("current); – Arcath Commented May 17, 2011 at 13:23
- @kjy — that should be an answer. @user662503 — Correct, you'll need to find a library that implements it for older browsers. – Quentin Commented May 17, 2011 at 13:24
5 Answers
Reset to default 3Not all browsers natively support getElementsByClassName although the situation is improving. You could use a function which checks for the native implementation and uses it if found or else grabs all the elements and checks each one for the classname, returning an array of those that match.
function getElementsByClassName( className, context ) {
//the context is the container we will confine our search to (optional)
context = context || document;
//use native implimentation if it exists
if( context.getElementsByClassName ) {
return context.getElementsByClassName( className ); //returns a nodeList
}
//we have to do it ourselves if we get here
var candidates = context.getElementsByTagName( '*' );
var found = [];
//regular expression to match the classname as per ments
var rxp = new RegExp( "(?:^|\\s)" + className + "(?:\\s|$)");
for( var i = 0, l = candidates.length; i < l; i++ ) {
if( rxp.test( className ) {
found.push( candidates[i] );
}
}
return found; //returns an array of nodes
}
getElementsByClassName is not patible in IE8. it's part of HTML5
Change:
window.onload=updatesidebar();
to:
window.onload=updatesidebar;
The way you have it just now will call the function immediately rather than when the page is loaded.
getElementsByClassName is not a JS native function you must refer to any library including it
you don't have to change the code, but you may add that function if not exists... ;)
if (typeof document.getElementsByClassName!='function') {
document.getElementsByClassName = function() {
var elms = document.getElementsByTagName('*');
var ei = new Array();
for (i=0;i<elms.length;i++) {
if (elms[i].getAttribute('class')) {
ecl = elms[i].getAttribute('class').split(' ');
for (j=0;j<ecl.length;j++) {
if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
ei.push(elms[i]);
}
}
} else if (elms[i].className) {
ecl = elms[i].className.split(' ');
for (j=0;j<ecl.length;j++) {
if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
ei.push(elms[i]);
}
}
}
}
return ei;
}
}