Question

我的脚本出了问题，它无法正确呈现JS。我试图找出问题，但找不到任何错字。如果我加载页面，标签是空白的，使所有css＆amp;其他JS禁用。但令人惊讶的是数据是正确的加载器。如果我删除脚本，一切都恢复正常。

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="jquery-1.9.1.js"></script>
    <script src="jquery-ui.js"></script>

    <script>
  // Create a connection to the file.
  var Connect = new XMLHttpRequest();

  // Define which file to open and
  // send the request.
  Connect.open("GET", "Customers.xml", false);
  Connect.setRequestHeader("Content-Type", "text/xml");
  Connect.send(null);

  // Place the response in an XML document.
  var TheDocument = Connect.responseXML;

  // Place the root node in an element.
  var Customers = TheDocument.childNodes[0];

  // Retrieve each customer in turn.

  $("#middle").ready( function () {
  document.write("<ul class='product'>");
  for (var i = 0; i < Customers.children.length; i++)
  {
      var dul = "wawa"+[i];
    //document.getElementById(dul).addEventListener('click', storeData, false);
   var Customer = Customers.children[i];

   // Access each of the data values.
   var Pic = Customer.getElementsByTagName("pic");
   var Name = Customer.getElementsByTagName("name");
   var Age = Customer.getElementsByTagName("tipe");
   var sex = Customer.getElementsByTagName("country");

    var checked = window.localStorage.getItem("selected"+i);

   // Write the data to the page.

    document.write("<li><img href='./pic/"); 
   document.write(Pic[0].textContent.toString());
   document.write(".jpg'><a href='display.html?id="+i+"'>");
   document.write(Name[0].textContent.toString());
   document.write("</a><div class='age'>");
   document.write(Age[0].textContent.toString());
   document.write("</div><div class='sex'>");
   document.write(sex[0].textContent.toString());
   document.write("</div><div class='cex'>");
   document.write("<input name='checkbox' type='checkbox' id='wawa_"+i+"'");
       if (!checked) {
       document.write(" onClick='cbChanged(this, "+i+")'");
       } else {
        document.write("checked onClick='cbChanged(this, "+i+")'");   
       }
   document.write("></div></li>");
  }

  document.write("</ul>");

  });


    function cbChanged(checkboxElem, x) {
    if (checkboxElem.checked) {
        window.localStorage.setItem("selected"+x, x);   
        alert("That box was checked.");
    } else {
        window.localStorage.removeItem("selected"+x);
        alert("That box was unchecked.");
    }
    } 
</script>


</head>
<body>
<div class="container">
    <div class="content" id="middle">

    </div>
    <div class="content" id="footer">

    </div>
</div>


</body>
</html>

好的，这是完整的来源。

Answer 1

您没有关闭HTML img标签

更改

document.write("<li><img href='./pic/"); 
document.write(Pic[0].textContent.toString());
document.write("'.jpg><a href='display.html?id="+i+"'>");
//              ^ this quote

到

document.write("<li><img href='./pic/"); 
document.write(Pic[0].textContent.toString());
document.write(".jpg'><a href='display.html?id="+i+"'>");
//                  ^ should be here

如果您打开开发人员控制台，通常可以查看此类错误发生的位置。它还会输出您遇到的错误，因此它会使该部分变得更加容易。你的控制台有错误吗？

开发控制台是：
Chrome：它是建造它的。
Firefox：Firebug
Safari：它构建了它

修改

除非你知道吊装是如何工作的，否则不要做var functionName = function（）{..}。这有助于你解决问题，所以改变

cbChanged = function(checkboxElem, x) {
  if (checkboxElem.checked) {
    window.localStorage.setItem("selected"+x, x); 
    alert("That box was checked.");
  } else {
    window.localStorage.removeItem("selected"+x);
    alert("That box was unchecked.");
  }
}

要

function cbChanged(checkboxElem, x) {
  if (checkboxElem.checked) {
    window.localStorage.setItem("selected"+x, x); 
    alert("That box was checked.");
  } else {
    window.localStorage.removeItem("selected"+x);
    alert("That box was unchecked.");
  }
}

如果没有上述更改，则不会挂起函数cbChanged。因此，如果您在到达之前调用它，您将收到错误。

还有其他一些事情在我看来很突出。您可能希望在javascript基础知识上花费更多时间。阅读document.write is a bad thing的原因。尝试删除部分脚本以缩小导致问题的原因。如果你做了一个小提琴，这将使这更容易修复。

Javascript不呈现 - 空头

1 个答案: