0

There's something wrong with my script, it doesn't render the JS correctly. I tried to pinpoint the problem but cannot find any typo. If i load the page, the tag is blank, making all css & other JS disabled. But suprisingly the data is loader correctly. If i remove the script, everything went to normal. 

    <!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>

Ok here's the full source.

RuvaloLU
  • 31
  • 1
  • 6

1 Answers1

2

You don't close the HTML img tag right

Change

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

To 

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

If you open the developer console you can usually see where errors like this take place. It will also output and javascript errors that you come across so it will make that part a whole lot easier. Do you have any errors in your console?

The dev consoles are:
Chrome: It is built it.
Firefox: Firebug
Safari: It's built it

EDIT:

Don't do var functionName = function() {..} unless you know about how hoisting works. This is contributing to you problem so change 

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

To

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

Without the above changes the function cbChanged is not hoisted. So if you call it before it is reached you will get an error.

There are several other things that stand out to me on this. You might want to spend some more time on your javascript fundamentals. Read up on why document.write is a bad thing. Try removing parts of the script to narrow down what is causing the problem. It would have made this easier to fix if you had made a fiddle.

Community
  • 1
  • 1
DutGRIFF
  • 4,593
  • 1
  • 29
  • 42
  • @FelixKling Yeah. Sorry. I was trying to include 3 lines to make it easier to find in the code block. Sorry – DutGRIFF Dec 04 '13 at 05:19
  • @DutGriff - ok yes i didn't close the img tag, thanks for the corrections. but as i said before, the data loaded correctly, html data is printed, still the error occurs. – RuvaloLU Dec 04 '13 at 05:25
  • 1
    I edited it to what I think would clearly show the change. If you don't like it, just revert the edit. – Felix Kling Dec 04 '13 at 05:32
  • @FelixKling Thanks man. I tried. Ha. I will take not for future posts. It feels good to learn from such a pro. – DutGRIFF Dec 04 '13 at 05:34
  • yes, the img is closed, i've done the correction, but still the script is breaking. look up in dev console or firebug, the head tag still blank. – RuvaloLU Dec 04 '13 at 05:37
  • @RuvaloLU I made an edit. Let me know how it goes. I don't see what is causing the error but the dev console should say something. I can't see your xml and this isn't the right way to go about things. – DutGRIFF Dec 04 '13 at 06:17