Question

I have some Javascript code that’s supposed to load the contents of a text file, and based on that info, insert an image and link into a span.

The JS file is here: http://jewishmusicstream.com/ads/ads.js

It’s supposed to insert an image into the main page on http://jewishmusicstream.com, in the mmusic and smusic divs/spans, but it seems to have stopped working.

Does anyone know what’s wrong, and how I can fix it?

Thanks a lot!

Answer 1

You should familiarize yourself with your browser’s JavaScript debugger. To open it in IE or FireFox, hit F12, in Chrome hit Ctrl+Shift+J. Here’s what IE’s JS debugger displays:

You can instantly see that the error is on line 12.

You are getting this error because you are trying to read the responseText property of your XMLHttpRequest object before it is ready. You can’t read that property until after you have received some response from the server. Remove that line of code. You are already properly reading the responseText in the readystatechange handler, so just removing that line of code should fix it. You’ll have to do the same on line 48 where you have a similar pattern.

Edit: By the way, you could really reduce your code by eliminating redundancies. Just create one function and call it twice with the appropriate params:

function loadAd(adSpecUrl, containerId)
{
    var xhr = new XMLHttpRequest();
    xhr.open("GET", adSpecUrl, true);
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState == 4)
        {
            var lines = xhr.responseText.split(/\r\n|\n/);
            var src = lines[0];
            var href = lines[1];
            var w = lines[2];
            var h = lines[3];
            var container = document.getElementById(containerId);
            var link = container.appendChild(document.createElement("a"));
            link.href = href;
            link.target = "_blank";
            var img = link.appendChild(document.createElement("img"));
            img.src = src;
            img.width = w;
            img.height = h;
        }
    }
    xhr.send();
}
loadAd("/ads/sm.txt", "smusic");
loadAd("/ads/mm.txt", "mmusic");