Question

我正在尝试从XML文档呈现目录并且一切正常，但是当尝试显示默认图像时，如果XML节点中没有图像，则会禁用父节点，因此强制它不显示任何它在我的控制台中读到了一个错误：

未捕获的TypeError：无法读取属性＆＃39; getElementsByTagName＆＃39;的未定义

这指向代码的这一部分：

if（records [i] .getElementsByTagName（＆＃34; IMAGE＆＃34;）[0] .childNodes.length＆gt; 0） {

所以我的问题是我的代码中的哪个部分是我的错误，导致它无法加载XML节点？

PS：如果有人需要更多我的代码，请告诉我，我很乐意发布。

for (var i = fromItem; i < nextMaxItem; i++) {
            if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0) {

                xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
                    + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
                    + '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="'+ records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue +'">'
                    + '<img class="product-image" src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" alt="' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '" />'
                    + '<div class="caption">'
                    + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
                    + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
                    + '</div>'
                    + "</a></div></div></article>";

            } else {

                xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
                    + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
                    + '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="'+ records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue +'">'
                    + '<img class="product-image" src="/images/Products/no-preview.jpg" alt="No Preview Available" />'
                    + '<div class="caption">'
                    + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
                    + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
                    + '</div>'
                    + "</a></div></div></article>";

            }

        }

以下是整个JavaScript代码：

var page = 1, perPage = 12, content = document.getElementById('content'),
pagination = document.getElementById('pagination'), records;

function paganation(page) {
    var nextMaxItem = perPage * page,
        fromItem = (page - 1) * perPage,
        maxPages = Math.ceil(records.length / perPage);

    var xmlContent = '<div class="row">';
    for (var i = fromItem; i < nextMaxItem; i++) {
        if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0) {

            xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
                + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
                + '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '">'
                + '<img class="product-image" src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" alt="' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '" />'
                + '<div class="caption">'
                + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
                + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
                + '</div>'
                + "</a></div></div></article>";

        } else {

            xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
                + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
                + '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '">'
                + '<img class="product-image" src="/images/Products/no-preview.jpg" alt="No Preview Available" />'
                + '<div class="caption">'
                + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
                + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
                + '</div>'
                + "</a></div></div></article>";

        }

    }
    xmlContent += "</div>";
    content.innerHTML = xmlContent;

    var paginationContent = '<nav><ul class="pagination">';
    if (page > 1) {

        paginationContent += '<li>';
        paginationContent += '<a href="javascript:paganation(' + (page - 1) + ');" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>';
        paginationContent += '</li>';

    } else {

        paginationContent += '<li class="disabled">';
        paginationContent += '<a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>';
        paginationContent += '</li>'

    }



    var prevPosition = page - 3;
    var nextPosition = page + 3;

    for (var i = 1; i <= maxPages; i++) {
        if (i != page) {
            if (i >= prevPosition && i <= nextPosition) {

                var linkToPage = i == prevPosition ? 1 : i == nextPosition ? maxPages : i;
                var linkText = i == prevPosition ? "..." : i == nextPosition ? "..." : i;

                paginationContent += "<li>";
                paginationContent += '<a href="javascript:paganation(' + linkToPage + ');">' + linkText + '</a>';
                paginationContent += "</li>";

            }
        } else {

            paginationContent += "<li class='active'>";
            paginationContent += '<a href="javascript:paganation(' + i + ');">' + i + '</a>';
            paginationContent += "</li>";

        }
    }

    var next = page + 1;
    if (next <= maxPages) {

        paginationContent += '<li>';
        paginationContent += '<a href="javascript:paganation(' + next + ');" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>';
        paginationContent += '</li>';

    } else {

        paginationContent += '<li class="disabled">';
        paginationContent += '<a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>';
        paginationContent += '</li>';

    }

    paginationContent += '</ul></nav>';
    pagination.innerHTML = paginationContent;
}

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

    xmlhttp = new XMLHttpRequest();

}
else {// code for IE6, IE5

    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.open("GET", xmlUrl, false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
records = xmlDoc.getElementsByTagName(xmlNode);

records = Array.prototype.slice.call(records).sort(function () {
    return Math.random() > 0.5 ? 1 : -1
});

paganation(1);

Answer 1

如果我们想象records长度为18，那么对于第二页，您将拥有：

fromItem - 12
nextMaxItem - 24

您正在将i从fromItem重复到nextMaxItem，但是一旦超过i = 18，您就会超过{{1}的结尾}}。你需要确保不会发生这种情况。您需要确保不要遍历数组末尾：

records

尝试读取空节点时使用XML的JavaScript错误

1 个答案: