CODEWITHSUNDEEP
javascript
Nicco
Nicco

Reputation: 286

include variable with addEventListener

I´ve just started to learn JavaScript and made a click function to change value of i depending on which li element is being clicked. Instead of having 3x of basically same function is it possible to send variable with addEventLisener to check with a if statement. Because if I add 1 or 2 more li it would add a lot of unnecessary code.

HTML:

<div><img src="image1" />
<ul>
<li id="list1">1</li>
<li id="list2">2</li>
<li id="list3">3</li>
</ul>
</div>

JavaScript:

var list1 = getElementById('list1');
var list2 = getElementById('list2');
var list3 = getElementById('list3');

list1.addEventListener("click", clicked1);
list2.addEventListener("click", clicked2);
list3.addEventListener("click", clicked3);
var i = 0;

function clicked1(){
    i= 0;
    loop();
}
function clicked2(){
    i = 1;
    loop();
}
function clicked3(){
    i = 2;
    loop();
}
function loop(){
    if (i > 2){
        i=0;
    }
    var imageloop = getElementById('slideshow').getElementsByTagName('img');
    imageloop[0].src = 'image' +  i;
    i++
    setTimeout(loop,3000);

}

So when one of the li element is being clicked it will change the img currently displaying.

Upvotes: 0

Views: 132

Answers (4)

Vedant Terkar
Vedant Terkar

Reputation: 4682

You don't need Separate code for each <li>,

Here is How to do it in single function:

HTML:

<div>
<ul id="All_List">
<li id="list1">1</li>
<li id="list2">2</li>
<li id="list3">3</li>
</ul>
</div>

JavaScript:

var clicked_li=0; /* It'll store the number of <li> being clicked */
var ul=document.getElementById("All_List"); /* <ul> Element with all <li> */
window.onload=function(){
var lis=ul.getElementsByTagName("li"); /* All <li>'s from <ul> */
for(var i=0;i<lis.length;i++){
var li=lis[i]; /* Specific <li> from <ul> ie, lis[0] means first <li> of <ul> */
    li.addEventListener("click", function(){  /* Listen and bind click event to that <li> */
    clicked_li=getIndex(this);  /* Store Which <li> Was clicked in clicked_li */
    alert("'list"+clicked_li+"' was clicked!");  
     /* if you just want to get the id you can use event.target.id; instead of getIndex(); */
    }, false);
}
};

function getIndex(node) {
var childs = node.parentNode.getElementsByTagName("li"); /* Get parent <ul> and all child <li> of that parent */
for (var i = 0; i < childs.length; i++) {
 if (node == childs[i]) break; /* Find which <li> from current <ul> was clicked */
 }
return (i+1); /* Return No.(index) of that <li> starting with 1 */
}

and here is the:

fiddle

for the same.

Hope it'll help you. Cheers!

Upvotes: 0

Nicco
Nicco

Reputation: 286

This is an "improve/clearer" of Vedant Terkar answer. Which may give a more clear aspect on the answer he gave.

if we give ul id group. We dont need id for each of the list-item inside the ul.

<ul id="group">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

Javascript

var i=0;

we set i to be a global variable and equal to 0 assuming it will display image(0) if nothing else is called.

window.onload=function(){
  var lis=document.getElementById("group").getElementsByTagName('li');

We are now creating a Nodelist which is called lis. Then we loop through the NodeList to se which list-element is being clicked at.

  for(i=0;i<lis.length;i++){
    var li=lis[i];
    li.addEventListener("click",index, false);
  }
}

function index(){ 
  var lis = document.getElementById("group").getElementsByTagName('li');
  i = getIndex(this);
  for(var a=0; a < lis.length; a++){
    if(a ==i){
      lis[i].innerHTML = 'Choosen';     
    }else{
      lis[a].innerHTML = 'list'+a;  
    }

  }
}

function getIndex(node) {
  var childs = node.parentNode.getElementsByTagName("li");
  for (var i = 0; i < childs.length; i++) {
    if (node == childs[i]) break;
  }
  return (i);
}

Upvotes: 0

Noble Mushtak
Noble Mushtak

Reputation: 1784

As Teemu said, bind to the list and use e.target. Then, change i according to e.target.innerHTML (because for your purposes, that's easier since the innerHTML is similar to the id, but simpler).

Assuming the <ul> element now has an id of "list":

var list = document.getElementById("list");
var i = null;
list.addEventListener("click", function(e) {
    window.i = parseInt(e.target.innerHTML, 10);
    console.log(window.i);
});

Upvotes: 2

SeanCannon
SeanCannon

Reputation: 77976

Bind to the list, not the list item - <ul id="ul1">... : 

document.getElementById('ul1').addEventListener('click', function (e) {
    var li = e.target;
    alert(li.id); // list1, list2, respectively, etc.
});

http://jsfiddle.net/seancannon/D6HX4/

Upvotes: 2

Related Questions