Avatar of Leonidas Dosas
Leonidas Dosas
Flag for Greece asked on

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

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck