Question

I have some JavaScript(1.7.2) in an external .js file that’s working ok. But after checking in IE compatibility mode to ensure it works with IE7+, I hit a problem. In the function loader(), which is called at page load, calling chooseImage(img) prevents subsequent calling of timeImgChange(). If I change the order of these two calls, the problem persists with chooseImage() not being called. Hope someone can help, Neil.

window.onload = loader;

function loader(){
    var img = document.getElementById('selector_chicks');
    chooseImage(img); //This function call works
    timeImgChange();  //Not called. Works in IE9. Is called if chooseImage() is removed
}


function chooseImage(img){
    document.getElementById('chooseimage').src = imageMap[img.title].path;
    document.getElementById(img.id).style.background = "#A66B00";
    document.getElementById('textselected').innerHTML = imageMap[img.title].text;

    /*unselect the other divs*/
    var selectors = document.getElementsByClassName('selector');
    for (var i = 0; i < selectors.length; i++){
        if (selectors[i].title != img.title){
            selectors[i].style.background = "#261e1e";
        }
    }
}

function timeImgChange() {  /*Change the image ever x milliseconds*/
    var imgIdArray = ["selector_egg", "selector_chicks", "selector_poults"];
    var n = 1;
    setInterval(function(){ 
      if (doImageCycle){
          var img = document.getElementById(imgIdArray[n]);
          chooseImage(img);
          n++;
          if (n > 2) {n = 0;}
       }
     }, 2000); 
}

Answer 1

IE < 9 doesn’t support getElementsByClassName. Since the chooseImage function relies on it, the engine will throw an error instead of continuing to run your code.