Member Avatar for Mr.M

Hi DW. I have code:

<div class="lv-item media">
<div class="lv-avatar bgm-purple pull-left">u</div>
<div class="media-body">
<div class="lv-title">dynamically_generated_value</div><!-- I want to get this value -->
<div class="lv-small">Sample text</div>
</div>
</div>

I use the following code to activate the selected list. NB the above is also dynamically generated for simplicity let say we have the above code with a unique lv-title value as it's the user chat id so it unique. And I want when I click this element I want to get that child class by name of the selected item. Here's the code I use to set the active when the user click the element. 

var chatheader = document.getElementById("uchatlist");
var lvitem = chatheader.getElementByClassName("lv-item media");
for(var i = 0; i < lvitem.length; i++){
lvitem[i].addEventListener("click", function (){
var lvitemcurrent = document.getElementByClassName("lv-item media active");
lvitemcurrent[0].className = lvitemcurrent[0].className.replace(" active","");
this.className += " active";
// Here is where I want to get the title value of the clicked element. 
});
}

NB the fist code is inside a div with a class uchatlist

What I'm doing is a chat system on the left it has a list of users which is what when you click I want to get its title value so that I will be able to show and hide the messages or chats on the right hand side for the selected user. On the right it's where the end user and chat and see the response messages as well. So I want to show this for each user when the user is being clicked from the left and show its chats on the right.

  • 1 Contributor
  • 1 Reply
  • 75 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Mr.M

Dani AI

Generated

Nice work, — your child-traversal approach finds the title, but you can make it simpler and more robust. Use event delegation on the parent so dynamically added items work without reattaching handlers. Use closest() to find the clicked .lv-item.media, querySelector() to get the .lv-title, and classList to toggle the active state. That avoids manual child loops and fragile index checks.

var list = document.getElementById('uchatlist');

list.addEventListener('click', function (e) {
  var item = e.target.closest('.lv-item.media');
  if (!item || !list.contains(item)) return;

  var current = list.querySelector('.lv-item.media.active');
  if (current) current.classList.remove('active');
  item.classList.add('active');

  var titleEl = item.querySelector('.lv-title');
  var title = titleEl ? titleEl.textContent.trim() : '';
  if (title) {
    // use title or a data attribute to show the matching chat pane on the right
    // e.g. document.querySelector('.chat-pane[data-chat-id="' + title + '"]')
  }
});

Tips: prefer textContent over innerHTML when you only need text. For stable matching, add a data-chat-id on the .lv-item and the right-hand panes instead of relying on visible text. Avoid global counters or manual child-indexing; event delegation handles dynamic lists cleanly. For details, see Element.closest, Element.querySelector, and Element.classList.

Member Avatar for Mr.M

I've solved it out like this 

var j = 0;
            var chatheader = document.getElementById("uchatlist");
            var lvitem = chatheader.getElementsByClassName("lv-item media");
            for(var i = 0; i < lvitem.length; i++){
            lvitem[i].addEventListener("click", function() {
            var lvitemcurrent = document.getElementsByClassName("lv-item media active");
            lvitemcurrent[0].className = lvitemcurrent[0].className.replace(" active", "");
            this.className += " active";


var father = this;
var sons = father.children;

var len = sons.length;
var i = 0;

for(i ; i < len ; i++){  
   var child = sons[i];

  if(child.className === "media-body"){
      var xchild = child.children;
      var xle = xchild.length;
      var x = 0;
      if(j == 0 && j < 1){

      for(x; x < xle; x++){
        var vchild = xchild[x];
        if(vchild.className === "lv-title"){

                alert(vchild.innerHTML);
                j++;
        }
      }
      }else{
                j = 0;
            }
  }
  }
            });
            }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.