Possible propagation problem

Leonidas Dosas
Leonidas Dosas used Ask the Experts™
on
I created the following HTML code with ul and list elements:
<ul>
   <li onclick="extend(this,leo(5));">List One</li>
   <li onclick="extend(this,leo(5));">List Two</li>
   <li onclick="extend(this,leo(3));">List Three</li>
</ul>

Open in new window


I added an onclick event in each list so to append at each lof them a new ul list with preffered list numbers as you can see (5-5-and 3)
The js code that i created is this:

var newList=document.createElement('ul');

function leo(numberList){
  
 
  for(var i=1;i<=numberList;i++){
  var list=document.createElement('li');
  list.innerHTML='This is a new list item';  
  newList.append(list);
  
  }
  newList.style.display='block';
  return newList;

}  

function event(e){
  e.stopPropagation();
}


function extend(arg,leo){  
  arg.append(leo);

}

Open in new window


The problem is that wherever i click a list element then the function append the past and the new list created elements into the last clicked element.
Img of the first list click:
first clickImg of the second click:
second clickAnd go on...
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
The problem is that this line
var newList=document.createElement('ul');

Open in new window

Is outside the leo function - so each time you add to the <ul> you are adding to the same one - not to the one under the clicked item.
Move that line inside the leo() function like so

function leo(numberList){
  var newList=document.createElement('ul');
 
  for(var i=1;i<=numberList;i++){
  var list=document.createElement('li');
  list.innerHTML='This is a new list item';  
  newList.append(list);
  
  }
  newList.style.display='block';
  return newList;

}  

Open in new window


I am not sure this is enough though - depending on what you are trying to achieve. A click on the same <li> twice will mean a second <ul> is added and another click will add a third rather than appending to the existing <ul>

If you want to keep appending to the same <ul> under each you can try this
HTML
<ul>
   <li onclick="extend(this,5);">List One</li>
   <li onclick="extend(this,5);">List Two</li>
   <li onclick="extend(this,3);">List Three</li>
</ul>

Open in new window

JavaScript
<script>

// leo takes as parameter the el target for the click
// and the number of items to add
function leo(el, numberList){
  // Try to get an existing <ul> and if it is not found create one
  var newList = el.querySelector('ul') || document.createElement('ul');
 
  for(var i=1;i<=numberList;i++){
  var list=document.createElement('li');
  list.innerHTML='This is a new list item';  
  newList.append(list);
  
  }
  newList.style.display='block';
  return newList;

}  

function event(e){
  e.stopPropagation();
}

// Accept the number here and pass
// the clicked object to the leo function
// so that leo can get the <ul> or create it
function extend(arg,n){  
  arg.append(leo(arg, n));
}

</script>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial