Retrieve the index of an array of classes with javascript

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

You can use 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");
        }
    }
}

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

Notice that the triggers, and your cycle starts in 0 , so I've changed the if of your code as well.

jsFiddle: link

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

Then you use a data attribute for this if you had control of 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 do not want to or can not tweak the html - and 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

Have you tried this?

   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>