Possible propagation problem
I created the following HTML code with ul and list elements:
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:
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...
<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>
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);
}
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...
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
The problem is that this line
Move that line inside the leo() function like so
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
var newList=document.createElement('ul');
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;
}
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>
<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>
Premium Content
You need an Expert Office subscription to comment.Start Free Trial