Comprobar click de multiples elementos

[Alexis88]

1. Define el conjunto de opciones en una variable:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var opciones = document.querySelectorAll("#carousel-index li");
}, false);
 

2. Delega el evento click al listado de id "carousel-index":

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var opciones = document.querySelectorAll("#carousel-index li");
 
    document.querySelector("#carousel-index").addEventListener("click", function(event){
        //Instrucciones
    }, false);
}, false);
 

3. En cada clic, verifica que se haya clickeado una opción (elemento <li>) y obtén el número de posición que ocupa en el conjunto de opciones:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var opciones = document.querySelectorAll("#carousel-index li");
 
    document.querySelector("#carousel-index").addEventListener("click", function(event){
        if (event.target.tagName == "LI"){
            var numero = opciones.indexOf(event.target);
        }
    }, false);
}, false);
 

4. Si el número de posición de la opción, con respecto al conjunto de opciones, es mayor a -1 (existe), súmale uno y ese será el valor que deberás concatenar en la ruta de la imagen:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var opciones = document.querySelectorAll("#carousel-index li");
 
    document.querySelector("#carousel-index").addEventListener("click", function(event){
        if (event.target.tagName == "LI"){
            var numero = opciones.indexOf(event.target);
 
            if (numero > -1){
                imageChanger[0].src = "https://civilian-interviewe.000webhostapp.com/img/mini_slider_" + (numero + 1) + ".png";
            }
        }
    }, false);
}, false);