JS code not working in IE8?

Question

I have a html which calls this js file. The html and js work fine in ie9 and above, but for some reason ie8 is not working with this js file, is it possible the html file is not loading the file or is there something wrong with the code?

function countTotalByClassName(klass){
 total=0;
 var arr = document.getElementsByClassName(klass);
 for (var index = 0; index < arr.length; index++) {
     // console.log(arr[index].checked);
     if(arr[index].checked){
     total=total+1;
     }
 };
 return total;
} // END countTotalByClassName()

/* getGreatestChoice()
 *
* Given an array of hashes, return the one with the highest number.
*
*/
function getGreatestChoice(arr){
res="";
size=0;
for (var i = 0; i < arr.length; i++) {
if (arr[i].count > size){
    res=arr[i].name;
}
}
return res;
} // END getGreatestChoice()

 function results(){
 item1 = {}; 
 item2 = {}; 
 item3 = {}; 
 item4 = {}; 

 arr=[];    // array of items

 // BEGIN BUILD HASH ARRAY
 item1["name"]="<h1>Lorem1</h1><p>random text</p><img src='img/Hi.png' class='img-responsive'>";
 item1["count"]=countTotalByClassName("A");
 arr.push(item1);
 item2["name"]="<h1>Lorem2</h1><p>random text</p><img src='img/Hi.png' class='img-responsive'>";
 item2["count"]=countTotalByClassName("B");
 arr.push(item2);
 item3["name"] = "<h1>Lorem3</h1><p>random text</p><img src='img/Hi.png' class='img-responsive'>";
 item3["count"] = countTotalByClassName("C");
 arr.push(item3);
 item4["name"] = "<h1>Lorem4</h1><p>random text</p><img src='img/Hi.png' class='img-responsive'>";
 item4["count"] = countTotalByClassName("D");
 arr.push(item4);
 // END BUILD HASH ARRAY

 res=getGreatestChoice(arr);

 document.getElementById('result').innerHTML = res;
 document.getElementById('result').style.width = '100%';
 document.getElementById('result').style.backgroundColor = '#F0F0F0';
 document.getElementById("result").style.padding="5px 10px 10px 10px"; 

} // END results()

Define "not working". Any errors logged, or not expected results etc? — James Thorpe, Jan 08 '15 at 16:03
Looks like [`getElementsByClassName`](https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName#Browser_compatibility) isn't in IE8 — James Thorpe, Jan 08 '15 at 16:03
its a quiz and the quiz is supposed to output as per the js file, but its like the js file is not even being loaded — rob, Jan 08 '15 at 16:04
@JamesThorpe has the answer, if you need IE8 support you might need to look at other ways of finding the elements, or include Sizzle/jQuery — steveukx, Jan 08 '15 at 16:05
Thanks all, so what would be the work around for this, any ideas? — rob, Jan 08 '15 at 16:06
[Back to google](https://www.google.co.uk/webhp#q=getelementsbyclassname+shim) again. First hit [is this](https://gist.github.com/E01T/6088383) — James Thorpe, Jan 08 '15 at 16:06
@rob SO already has a workaround in [this question](http://stackoverflow.com/q/7410949/1883647). — ajp15243, Jan 08 '15 at 16:07
Hi All, the below solution is workaround for me, that works fine. — rob, Jan 08 '15 at 17:14

score 2 · Answer 1 · answered Jan 08 '15 at 16:07

2

It seems that the method getElementsByClassName is not supported in IE8. Try using querySelectorAll, that works fine in IE8.

Instead of:

var arr = document.getElementsByClassName(klass);

Use:

var arr = document.querySelectorAll('.' + klass);

If you also need support for IE6, then you can use this polyfill.

answered Jan 08 '15 at 16:07

lante

7,192
4
37
57

2

Assuming you don't mind moving the problem to IE7 :) – James Thorpe Jan 08 '15 at 16:08
1

You are right, I added a polyfill to my answer with support to IE6 – lante Jan 08 '15 at 16:11
I wont be supporting IE7 or below. Thanks Lante, thats worked fine – rob Jan 08 '15 at 16:14
Thanks James, for the input and explanation – rob Jan 08 '15 at 16:14

JS code not working in IE8?

1 Answers1