Estou tentando adicionar um eventListener, do tipo click, nas minhas divs através de suas classes, que se chamam: option-title. Entretanto como é mais de um título, gostaria que recuperasse exatamente aquele que estou clicando.
Segue o código:
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>
O que eu gostaria que acontecesse é que eu clicando, por exemplo, na terceira div, ele me ternasse seu índice (2). Outra duvida também é se eu posso passar algum parâmetro quando estou adicionando o EventListener, pois tentei passar o índice. Grato.