banner ads not visible in html page

Question

i have a file banners.js

function addEvent(object, evName, fnName, cap) {
    if (object.attachEvent)
        object.attachEvent("on" + evName, fnName);
    else if (object.addEventListener)
        object.addEventListener(evName, fnName, cap);
}

var nextAd;

function makeBannerAds() {
    var bannerBox = document.createElement("div");
    bannerBox.id = "bannerBox";
    document.body.appendChild(bannerBox);
    for (var i=0; i<adsURL.length; i++) {
        var bannerAd = document.createElement("div");
        bannerAd.className = "bannerAd";
        bannerAd.style.zIndex = i;
        var urlLink = document.createElement("a");
        urlLink.href = adsURL[i];
        var bannerIndex = document.createElement("img");
        bannerIndex.src = "banner" + i +".jpg";
        bannerIndex.style.width="290px";
        bannerIndex.style.height="55px";
        bannerBox.appendChild(bannerAd);
    }
    bannerBox.appendChild(bannerAd);
    setInterval("changeBannerAd()", 10000);
}

function changeBannerAd() {
    var allAds = document.getElementById("bannerBox").childNodes;
    alert('work');
    for(var i=0; i<num; i++) {
        if(allAds.style.zIndex == 0) {
            allAds.style.top = "-50px";
            nextAd = allAds;
        }
    }

    for(var i=0; i<num; i++) {
        allAds.style.zIndex--;

        if(allAds.style.zIndex < 0)
            allAds.style.zIndex = num-1;
    }

    var timeDelay = 0;
    for(var i=-50; i<=0; i++) {
        setTimeout("moveNextAd(" + i + ")", timeDelay);
        timeDelay += 15;
    }
}

function moveNextAd(top) {
    nextAd.style.top = top + ".px" 
}

addEvent(window, "load", makeBannerAds(), false);

the second file ads.js

var adsURL = new Array();

//this stores each item in the array using a index place holder
adsURL[0] = "testpage0.htm";
adsURL[1] = "testpage1.htm";
adsURL[2] = "testpage2.htm";
adsURL[3] = "testpage3.htm";
adsURL[4] = "testpage4.htm";
adsURL[5] = "testpage5.htm";
adsURL[6] = "testpage6.htm";
adsURL[7] = "testpage7.htm";
adsURL[8] = "testpage8.htm";
adsURL[9] = "testpage9.htm";
adsURL[10] = "testpage10.htm";
adsURL[11] = "testpage11.htm";
//and an html file where these are included.

javascript is not showing any error and also all the statements are running but the images are not visible on the page. i couldnot figure the problem. working from last 2 days.

Answer 1

New answer:

Some of your code had to be revised I think. I just edited this off of what I thought it was supposed to look like.

Check the new jsFiddle I think it might be getting you closer.

Briefly, the issue was that childNodes() returns an array of elements, so you need to reference that variable as you would an array

Secondly, you didn't have all the appends that were required.

var adsURL = new Array();
adsURL[0] = "testpage0.htm";
...
adsURL[11] = "testpage11.htm";

var nextAd;

var moveNextAd = function (top) {
    nextAd.style.top = top + ".px"
}; //changed this to function as variable, answer explained below

var changeBannerAd = function () {
    var num = adsURL.length
    var allAds = document.getElementById("bannerBox")
    allAds = allAds.childNodes;
    //^^^ here is what was wrong
    // Child nodes returns an array of elements
    // So for allAds, you should reference it with allAds[i]
    for (var i = 0; i < num; i++) {
        if (allAds[i].style.zIndex == 0) {
            allAds[i].style.top = "-50px";
            nextAd = allAds[i++];
        }
    }

    for (var i = 0; i < num; i++) {
        allAds[i].style.zIndex--;

        if (allAds[i].style.zIndex < 0) allAds[i].style.zIndex = num - 1;
    }

    var timeDelay = 0;
    for (var i = -50; i <= 0; i++) {
        setTimeout((function () {
            moveNextAd(" + i + ");
        }()), timeDelay);
        timeDelay += 15;
    }
}; //changed this to function as variable too.

function addEvent(object, evName, fnName, cap) {
    if (object.attachEvent) object.attachEvent("on" + evName, fnName);
    else if (object.addEventListener) object.addEventListener(evName, fnName, cap);
}

function makeBannerAds() {
    var bannerBox = document.createElement("div");
    bannerBox.id = "bannerBox";
    document.body.appendChild(bannerBox);
    for (var i = 0; i < adsURL.length; i++) {
        var bannerAd = document.createElement("div");
        bannerAd.className = "bannerAd";
        bannerAd.style.zIndex = i;
        bannerAd.style.position = "absolute";
        var urlLink = document.createElement("a");
        urlLink.href = adsURL[i];
        var bannerIndex = document.createElement("img");
        bannerIndex.src = "banner" + i + ".jpg";
        bannerIndex.style.width = "290px";
        bannerIndex.style.height = "55px";
        urlLink.appendChild(bannerIndex); //Here is the other problem
        bannerAd.appendChild(urlLink); //All these weren't appended
        bannerBox.appendChild(bannerAd); // to each other
    }
    setInterval((function () {
        changeBannerAd();
    }()), 10000);
}

addEvent(window, "load", makeBannerAds(), false);

Secondly, not to be picky or anything but you should probably declare the functions you pass into setInterval or setTimeout as variables rather than explicit functions or run them through an anonymous function like I have done. These two functions use a form of eval, and as we all know eval is evil, eval is evil, and eval is evil

Old answer; ignore

Question: Is your ads.js added before or after banners.js Try adding the script tag before banners.js I just placed the ads.js content above the banners.js script in a jsFiddle and it worked just fine for me

Check the JS Fiddle for full code at the top.