Retrieve the input from a class array with javascript

Question

I’m trying to add an eventListener, click-type, to my Ivs through their classes, which are called: option-title. However as it is more than one title, I would like you to recover exactly the one I am clicking.

Follows the code:

var groupOptions = document.getElementsByClassName("option-title");
    for(var i = 0; i < groupOptions.length; i++){
        groupOptions[i].addEventListener("click", message(i));
    }
    function message(i){
        if(i == 1){
            alert("Clicado 1!");
        }
        else if(i == 2 ){
            alert ("Clicado 2");
        }else if(i == 3){
          alert("Clicado 3");
        }else if(i == 4){
          alert("Clicado 4");
        }
    }

<div class="box-option option-title">
   <span>Title 1</span>
</div>
<div class="box-option option-title">
   <span>Title 2</span>
</div>
<div class="box-option option-title">
   <span>Title 3</span>
</div>
<div class="box-option option-title">
   <span>Title 4</span>
</div>

What I would like to happen is that I click, for example, on the third div, it suits me his index (2). Another question is also whether I can pass some parameter when adding Eventlistener, because I tried to pass the index. Grateful.

Answer 1

The way you are registering the event is not correct. You cannot pass a function running she: message(i). The parentheses run it and what would be recorded would be the return of it. To pass a function as parameter you have to pass only its name, in case message only. What matters is that within the event you will always have the this, which is its element.

Then you use an attribute data for this if you had control of the generated html, example:

<div class="box-option option-title" data-indice="1">
   <span>Title 1</span>
</div>

Reading the attribute:

function message(){
    alert(this.dataset.indice);
}

Fiddle

If you don’t want or can’t touch html - and it’s even simpler - you can set the attribute in the script itself:

for(var i = 0; i < groupOptions.length; i++){
    groupOptions[i].dataset.indice = (i + 1);
    groupOptions[i].addEventListener("click", message);
}

Fiddle

Answer 2

Have you tried that?

   var groupOptions = document.getElementsByClassName("option-title");

for(var i = 0; i < groupOptions.length; i++){
groupOptions[i].addEventListener("click", message);
}

function message(e){ 
console.log(this);
}

<div class="box-option option-title">
   <span>Title 1</span>
</div>
<div class="box-option option-title">
   <span>Title 2</span>
</div>
<div class="box-option option-title">
   <span>Title 3</span>
</div>
<div class="box-option option-title">
   <span>Title 4</span>
</div>

Answer 3

You were almost there. Just need to create a new scope for this i be memorized.

You can use it like this:

function message(i) {
    return function () {
        if (i == 0) {
            alert("Clicado 1!");
        } else if (i == 1) {
            alert("Clicado 2");
        } else if (i == 2) {
            alert("Clicado 3");
        } else if (i == 3) {
            alert("Clicado 4");
        }
    }
}

This way when you use .addEventListener("click", message(i)); the code actually calls the function and passes the i. This function in turn returns another one that will then be used as callback when click happen, but already with the i corresponding in memory.

Notice that the cycles, and your cycle begins in 0, so I changed the if of your code as well.

jsFiddle: http://jsfiddle.net/h3sdcr3v/