CODEWITHSUNDEEP
javascriptjqueryhtml
Sayak
Sayak

Reputation: 119

How to create a clickable list of divs with sub items using JavaScript

I want to create a list of clickable divs from arrays using Javascript, where the list structure has to be something like this:-

<div id="outerContainer">
  <div id="listContainer">

    <div id="listElement">
      <div id="itemId"> </div>
      <div id="itemTitle"> </div>
      <div id="itemStatus"> </div>
    </div>

    <div id="listElement">
      <div id="itemId"> </div>
      <div id="itemTitle"> </div>
      <div id="itemStatus"> </div>
    </div>

  </div>
</div>

I want to extract the values of itemId, itemTitle and itemStatus from three arrays itemIdData[ ], itemTitleData[ ] and itemStatusData[ ] respectively, to create the whole list.

Also, when I click on any of the listElements, I want an alert showing the itemId. Can anyone help me with this problem.

Upvotes: 0

Views: 870

Answers (3)

Debloper
Debloper

Reputation: 158

If you're using jQuery, then try something like this:

$("#listContainer").on("click", "div", function () {
    console.log("jQuery Event Delegation");
    alert($(this).find(">:first-child").attr("id"));
});

It's possible to write the same thing without jQuery, but will take further lines of code - I'm conveying the idea of delegation here (there are extensive existing docs and examples on the JQuery site, and here on this site).

NB: the code you're submitted in the question can't(shouldn't) have multiple DOM elements with same IDs (that's what classes are for - for semantically similar elements). Also, trying to emulate a list using divs instead of li elements is perhaps not best practice.

Upvotes: 3

Sayak
Sayak

Reputation: 119

After a bit of experimentation, understood what I was doing wrong and how to get it done. Here's the code:-

    var listContainer = document.createElement("div");
    document.getElementById("outerContainer").appendChild(listContainer);

    for (var i = 0; i < json.length; i++) {

        //create the element container and attach it to listContainer.
        var listElement = document.createElement("div");
        listElement.id = i;
        listElement.className = "listItemContainer";
        listElement.addEventListener("click", function(e){
            var itemId = e.target.children[1].innerHTML;
            alert(itemId);
        });
        listContainer.appendChild(listElement);

        //create and attach the subchilds for listElement.

        var itemTitle = document.createElement("span");
        itemTitle.innerHTML = postTitleData[i];
        itemTitle.id = 'title'+i;
        itemTitle.className = "itemTitle";
        listElement.appendChild(itemTitle);

        var itemId = document.createElement("div");
        itemId.innerHTML = postIdData[i];
        itemId.id = 'id'+i;
        itemId.className = "itemId";
        listElement.appendChild(itemId);

        var itemStatus = document.createElement("span");
        itemStatus.innerHTML = postStatusData[i];
        itemStatus.id = 'status'+i;
        itemStatus.className = "itemStatus";
        listElement.appendChild(itemStatus);
    }

Upvotes: 2

Sayak
Sayak

Reputation: 119

Tried something like this which isn't quite working!

var listContainer = document.createElement("div");
document.getElementById("outerContainer").appendChild(listContainer);
var listElement = document.createElement("div");
listContainer.appendChild(listElement);
listElement.className = "listItemContainer";

for (var i = 0; i < json.length; i++) {

            var itemId = document.createElement("div");
            itemId.innerHTML = idData[i];
            listElement.appendChild(itemId);
            itemId.className = "itemId";

            var itemTitle = document.createElement("div");
            itemTitle.innerHTML = titleData[i];
            listElement.appendChild(itemTitle);
            itemTitle.className = "itemTitle";

            var itemStatus = document.createElement("div");
            itemStatus.innerHTML = statusData[i];
            listElement.appendChild(itemStatus);
            itemStatus.className = "itemStatus";

            listElement.appendChild(document.createElement("hr"));

            var elementId = 'ListElement'+i;
            listElement.id = elementId;

            listElement.addEventListener("click", function(){
                alert(document.getElementById(elementId).innerHTML);
            });
}

Upvotes: 1

Related Questions