Possible propagation problem

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:

Img of the second click:

And go on...

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

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LVL 65

Julian HansenCommented: 2017-03-20

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial

Possible propagation problem

Who is Participating?