Question

我不确定原因，但以下内容阻止了我的JavaScript工作。

我知道这不是最好的做法，但我不知道它在哪里打破。

JavaScript的：

function loadmore(id) {
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var content;
            var x = JSON.parse(xmlhttp.responseText);
            alert('' + x.length);
            for (i = 0; i < x.length; i++) {
                document.getElementById("content").innerHTML += '<div class="col-lg-4 col-md-4 col-sm-4">';
                document.getElementById("content").innerHTML += '<div class="thumbnail">'
                document.getElementById("content").innerHTML += '<img src="' + x[i].main_image + '" alt="' + x[i].title + '" style="width:300px !important; height:150px; overflow:none;">';
                document.getElementById("content").innerHTML += '<div class="caption">';
                document.getElementById("content").innerHTML += '<h3>' + x[i].title + '</h3>';
                document.getElementById("content").innerHTML += '<p>' + x[i].content;
                document.getElementById("content").innerHTML += '</p>';
                document.getElementById("content").innerHTML += '<p><a href="//russellharrower.com/' + x[i].url + '" class="btn btn-default" role="button">Read More</a></p>'
                document.getElementById("content").innerHTML += '</div>';
                document.getElementById("content").innerHTML += '</div>';
                document.getElementById("content").innerHTML += '</div>';


                id = x._id;
                //document.getElementById("content").innerHTML+=content;

            }
        }
    }


    //xmlhttp.responseText
    xmlhttp.open("GET", "search/json&qid=" + id, true);
    xmlhttp.send();

}

Answer 1

作为一般规则，正确的操作顺序是：

new XMLHttpRequest
.open()
.onreadystatechange =
.send()

在某些浏览器中，特别是那些允许为多个请求重复使用同一对象的浏览器，调用.open()将清除您的.onreadystatechange处理程序。

另外请注意，请勿混用.innerHTML和+=。以下是浏览器的看法：

document.getElementById("content").innerHTML += '<div class="col-lg-4 col-md-4 col-sm-4">';
哦，有一个缺少的结束标记，最好添加。</div>自动添加。
document.getElementById("content").innerHTML += '<div class="thumbnail">'
哦，有一个缺少的结束标记，最好添加。</div>自动添加。
document.getElementById("content").innerHTML += '<img src="' + x[i].main_image + '" alt="' + x[i].title + '" style="width:300px !important; height:150px; overflow:none;">';
好的，添加了一张图片。请注意，我们在您期望的<div><div>内不！
document.getElementById("content").innerHTML += '<div class="caption">';
哦，有一个缺少的结束标记，最好添加。</div>自动添加。
document.getElementById("content").innerHTML += '<h3>' + x[i].title + '</h3>';
好的，添加了<h3>。仍然不在你认为的<div><div><div>中！
document.getElementById("content").innerHTML += '<p>' + x[i].content;
缺少</p>标记，需要将其添加到。
document.getElementById("content").innerHTML += '</p>';
此处没有<p> ...最好添加一个以使此</p>有效。添加了空段。
document.getElementById("content").innerHTML += '<p><a href="//russellharrower.com/' + x[i].url + '" class="btn btn-default" role="button">Read More</a></p>'
好的，添加链接的段落。
document.getElementById("content").innerHTML += '</div>';
啊！我没有开放<div>！最好添加一个。添加了空<div>。（重复x3）

您能否看到这种循序渐进的方法如何导致问题，因为它一直认为您已经完成并相应地纠正了“糟糕”的HTML？

Answer 2

为简化此操作，可以进行一些小的更改。试试......

var content = document.getElementById("content");
var build_html = [
  "<div>",
  "Content Here",
  "</div>"
  ].join("\n");
content.innerHTML = build_html;

显然，你的HTML内容比我在这里的内容更强大，但有了这个，你不会一遍又一遍地抨击DOM。

document.innerHTML上的JavaScript错误

2 个答案: