JavaScript onclick event on elementByClassName

Question

I have following mark up and I am trying to run a javascript function once clicked. So far I haven't faced any success. Plz help -

<div class='color-bar'></div>
<div class='color-bar'></div>
<div class='color-bar'></div>
<div class='color-bar'></div>

var ColorBars = document.getElementsByClassName("color-bar"); 
var charts = $("#line-container").highcharts();
var series;
var colorIndex = new Array();

for(var i = 0; i < ColorBars.length; i++){

    ColorBars[i].onclick = function(){
        hideColor(i);
    }
}

function hideColor(index){
   var charts = $("#line-container").highcharts();

   var series = charts.series[index];

   if(series.visible){
       series.hide();
   }
   else{
       series.show();
   }
}

The problem I am having is figuring out which color-bar user has clicked. Is it first one, 2nd or 3rd. Based on this I need to fire the hideColor function.

Thanks a lot. Best regards, jahid

You could use `hideColor($(this).index());` instead of `hideColor(i);`. Someone already posted an answer trying to point that out but then deleted it. Anyway, that should help with the issue. — Sebastian Simon, Feb 12 '16 at 14:45

score -1 · Answer 1 · answered Feb 12 '16 at 14:22

You need to give you colorbars ids:

<div class='color-bar' id="colorbar1"></div>
<div class='color-bar' id="colorbar2">></div>
<div class='color-bar' id="colorbar3">></div>
<div class='color-bar' id="colorbar4">></div>

And then you can check with:

ColorBars[i].id == X

JavaScript onclick event on elementByClassName

1 Answers1