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:
first clickImg of the second click:
second clickAnd go on...
LVL 15
Leonidas DosasAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

Julian HansenCommented:
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

1

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.