CODEWITHSUNDEEP
javascripthtml
user6319790
user6319790

Reputation: 55

how to create list onClick

Im trying to create list of UL views, and add them a specific onclick function. this is my code:

function createList(divName) {

  var divName = document.getElementById(divName);
  for (var i in myListOfObjects) {
    // create an arbitrary ul element
    var ul = document.createElement('ul');
    var s = myListOfObjects[i]; //get specific object (JSON object)
    var subject = document.createElement('li'),
      subjectContent = document.createTextNode("someText"); // subject
    subject.appendChild(subjectContent);
    ul.appendChild(subject);
    ul.onclick = function() {
      //pass  the specific TEXT from the specific JSON object to the next page.
      window.location.href = "NewPage.html" +
        "?specificText=" + JSON.stringify(s);
    };
    // append the created ul element above to the  div element                
    div.appendChild(ul);
  }

}

My problem is : When I run the function , click fucntion Get the same " TEXT " for all objects in " MyListOfObjects " ( the text is the last object "s" text its mean that the last object is overrite the first ) , I checked the text value in this list is not the same , so how can I know what is causing the problem foreign this ? And how to solve this problem .

Thanks !

Upvotes: 0

Views: 1231

Answers (2)

Mohammad Hossin Samadian
Mohammad Hossin Samadian

Reputation: 117

Thus I am underestanding, you need a UL tag that has li tags inside in based on specified Object list(myObjectList). when you click on every li your page redirect to specified page based on object. try it code:

var myListOfObjects = [
        {'TEXT': 'a1', 'ID': 0},
        {'TEXT': 'a3', 'ID': 1},
        {'TEXT': 'a2', 'ID': 2}
    ];//sample object list

    function createList(divName) {
        var div = document.getElementById(divName);
        // a ul element has many li elements.
        //this line out of for-loop. only one ul is enough.
        var ul = document.createElement('ul');
        var i = 0;//counter of
        for (var objId in myListOfObjects) {
            var obj = myListOfObjects[objId];
            var subject = document.createElement('li');
            subjectContent = document.createTextNode("someText"); // subject
            subject.id = 'li_' + i;
            subject.setAttribute('myId', i);// specified related object
            subject.appendChild(subjectContent);

            subject.onclick = function (event) {
                var index = this.getAttribute('myId');
                obj = myListOfObjects[index];
                loc = "NewPage.html" + "?specificText=" + JSON.stringify(obj['TEXT']);
                window.location.href = loc;
                //remove comment to test
                alert(loc);

            };
            ul.appendChild(subject);
            i++;
        }
        div.appendChild(ul);

    }

Upvotes: 1

JSchirrmacher
JSchirrmacher

Reputation: 3364

First, you create a div DOM object but assign it to the variable divName. Then, later, you use variable div which was never assigned.

Try this instead:

function createList(divName) {

  var div = document.getElementById(divName);
  for (var i in myListOfObjects) {
    // create an arbitrary ul element
    var ul = document.createElement('ul');
    var s = myListOfObjects[i]; //get specific object (JSON object)
    var subject = document.createElement('li'),
      subjectContent = document.createTextNode(s); // subject
    subject.appendChild(subjectContent);
    ul.appendChild(subject);
    ul.onclick = function() {
      //pass  the specific TEXT from the specific JSON object to the next page.
      window.location.href = "NewPage.html" +
        "?specificText=" + JSON.stringify(s["TEXT"]);
    };
    // append the created ul element above to the  div element                
    div.appendChild(ul);
  }
}

Upvotes: 0

Related Questions