将链接更改为图像并使链接停止工作的Javascript代码

Question

我有一些Javascript代码应该加载文本文件的内容，并根据该信息插入图像并链接到跨度。

JS文件在这里：http://jewishmusicstream.com/ads/ads.js

它应该在http://jewishmusicstream.com上的主页中插入一个图像，在mmusic和smusic divs / span中，但似乎已停止工作。

有谁知道什么是错的，以及我如何解决它？

非常感谢！

Answer 1

您应该熟悉浏览器的JavaScript调试器。要在IE或FireFox中打开它，请点击 F12 ，在Chrome中点击 Ctrl + Shift + J 。以下是IE的JS调试器显示的内容：

您可以立即看到错误在第12行。

您收到此错误是因为您尝试在responseText对象准备好之前阅读XMLHttpRequest属性。在收到服务器的某些响应之前，您无法读取该属性。删除该行代码。您已经正确阅读responseText处理程序中的readystatechange，因此只需删除该行代码即可解决问题。你必须在你有类似模式的第48行做同样的事情。

编辑顺便说一下，您可以通过消除冗余来真正减少代码。只需创建一个函数并使用适当的参数调用它两次：

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");