html - Javascript function not working properly in IE<10 -
i have link, hides , shows fb:comments
element
<a onclick="comments(this)"> + comments ( <fb:comments-count href="http://some.url.com" fb-xfbml-state="rendered"> <span class="fb_comments_count">1</span> </fb:comments-count> ) </a> <div class=\"facebook-comments\"><!-- default style 'display:none'--> <fb:comments href=\"http://some.url.com" width="644" num_posts="10"> </fb:comments> </div>
this comments()
function:
function comments(src){ //hide 'a' element called function src.style.display="none"; //show comments element src.parentnode.getelementsbyclassname('facebook-comments')[0].style.display="block"; return false; }
this works fine in chrome, firefox, opera, safari , ie10 too, it's buggy in ie<10, happens when click + comments (#)
link disappears comments div not appearing, link becomes useless.
is ie problem or did wrong?
in both cases, how can solve it?
getelementsbyclassname
not supported old ie. mdn claims support since ie9.
another option queryselector
or queryselectorall
. supported since ie8:
src.parentnode.queryselector('.facebook-comments').style.display="block"; //or src.parentnode.queryselectorall('.facebook-comments')[0].style.display="block";
if want support ie7 (or if syntax), best bet use framework or library. popular framework available jquery (the sizzle engine, part of it, available separate download well). jquery:
$(src).parent().find(".facebook-comments:first").show();
if want avoid external libraries and want support ie7, choices quite limited, getelementsbytagname
still available (since ie 5.5). sadly, classlist
isn't:
var elems = src.parentnode.getelementsbytagname("div") for(var = 0; i<elems.length; i++){ elem = elems[i]; if(elem.classname.matches(/(^| )facebook-comments( |$)/){ elem.style.display = "block"; break; } }