Refer to the html list item object correctly in javascript to log events
I would like to know how I can refer to the list item object if I had for example the following html list
<div id="subdiv_2">
<div id="subdiv_3">
<ul>
<li><a href="">Item1</a></li>
<li><a href="">Item2</a></li>
<li><a href="">Item3</a></li>
</ul>
</div>
</div>
How can I register onclick for Item2 li without needing to have a unique elementId for example I can do this for subdiv_3 because it has a unique id and is not in the list
document.getElementById('subdiv_3').addEventListener('click', function();, false);
My goal is to ultimately assign a function to each list object, for the number of list objects with unique parameters based on the number of the list of objects, e.g .:
for(i=0;i<list.length;i++){
"document.getElementById(list.item"+i+").addEventListener(\'click\',function("+i+");,false);";
}
source to share
You can get all the children subdiv_3
that <li>
. Then repeat this loop, adding functions as you go.
div = document.getElementById('subdiv_3');
els = div.getElementsByTagName('li');
for (var i=0, len=els.length; i<len; i++) {
alert(i); // add your functions here
}
Looking at your example code, when you are in a loop, create your functions, you might run into problems with closures. (All functions will use the same i value.) Check out my answer to this question to solve this problem: How do I add an event handler with arguments to an array of elements in Javascript?
source to share
@Supernovah: you can actually assign a real function setTimeot()
. This saves you the hassle of string formatting that gets in your way when you want to do more complex things than just setting one property.
This is the code:
function attachToList() {
var div = document.getElementById('menu2');
var els = div.getElementsByTagName('li');
// create a closure returning an anonymous inner function
var fn = function(li) {
return function() {
li.style.backgroundColor = "#FFFFCC";
};
};
for (var i=0, len=els.length; i<len; i++) {
// create function instance suitable for current iteration
var changeLi = fn(els[i]);
// pass function reference to setTimeout()
setTimeout(changeLi, 250*i);
}
}
And a short explanation:
Using a closure is a trick to ensure that setTimeout()
all variables still have their expected values when triggered .
You do this by creating a function that returns a function. The outer function takes parameters, the inner function does not. But this applies to the parameters of the external function. In the loop, you call the outer function (with the correct parameters) and each time you get a whole new inner function, each with its own version of the parameter values. This is the one you designate setTimeout()
.
source to share
In response to a comment on Benry's Answer By Benry, after using his code, the following proves that every Li element can be referenced by els [i]
function attachToList(){
div = document.getElementById('menu2');
els = div.getElementsByTagName('li');
for (var i=0, len=els.length; i<len; i++) {
setTimeout('els['+i+'].style.backgroundColor=\"#FFFFCC\";',(250*i));
}
}
source to share