javascript - addEventListener() to my class with loop -

// color pattern function function colorpattern(color_pattern_box) {     var color_board = $("#colorboard");     var rtrnval = ""; //default standard syntax     var color_temp = ("");      for(var c = 0; c < color_pattern_box.length; c++){         var color_split = color_pattern_box[c].split(":");         var color_name = color_split[0];         var color_value = color_split[1];         color_temp += "<div id="+color_value+"; data-title="+color_name+" onclick='' class='mycolor_warpper'; style='background: "+color_value+";'></div>";         var color_inset = $(".mycolor_warpper");         colorpattern_attachevent(color_inset, "click", updatenumbertext, jsonsave);     }      // //input option parent     color_board.html(color_temp); }   function colorpattern_attachevent(element, event, callbackfunction1, callbackfunction2) {   if(typeof(element.addeventlistener)=='function')  {     element.addeventlistener(event, function(){       callbackfunction2(this.getattribute("id"));       callbackfunction1();     }, false);   } } 

i have function loop, , want to use loop add eventlistener class.

basically, loop create div , class name "mycolor_wrapper". how attach each class addeventlistener() click, here code tested , doesn't work.

i have function loop, , want to use loop add eventlistener class.

there's easier way go adding less , getting more, jquery dinglemeyer explaining.

basically loop create div , class name "mycolor_wrapper". how attach each class addeventlistner click, here code tested won't work.

ok, while clumping things in code lump might sound great, should try coding 1 portion of code, test , see if works, move on next. when build house don't start on roof , build foundation frame.

so i'll answer question:

…how attach each class addeventlistner click…

generically generic javascript.

first part of answer, have commented (and others have well), don't want go route. adding multiple eventlisteners of same eventtype unnecessary , messy. instead can utilize properties control event bubbling:

• event.target: element clicked.

• event.currenttarget: element added eventlistener to. in simple setup, same event.target. in situation it'll different because add one eventlistener parent element (i.e. #colorboard) of multiple event.targets (i.e. .colorwrap(i hate underscores .colorwrap = .mycolor_warpper)).

• event.stoppropagation(): method stop propagation of click event bubbling rest of elements in event chain (e.g. #colorboard), thereby isolate click event 1 element.

snippet

// reference parent #colorboard  var parent = document.getelementbyid('colorboard');    // add eventlistener parent  parent.addeventlistener('click', truecolor, false);    // create truecolor(event) eventhandler  function truecolor(event) {      // if event.target not event.currenttarget then...    if (event.target !== event.currenttarget) {        // store event.target in variable 'clicked'      var clicked = event.target;        // next change clicked background-color it's id.      clicked.style.backgroundcolor = clicked.id;      }      // use event.stoppropagation() prevent event bubbling  #colorboard never hear event.    event.stoppropagation();  }

.colorboard {    border: 3px dashed black;    width: 300px;    height: 300px;  }  h1 {    font-size: 20px;    color: orange;  }  .colorwrap {    height: 100px;    width: 300px;    cursor: pointer;    font-size: 15px;    color: white;    background: black;    border: 1px solid white;  }

<section id="colorboard">    <h1>color board</h1>    <div id="red" class="colorwrap">red</div>    <div id="green" class="colorwrap">green</div>    <div id="blue" class="colorwrap">blue</div>  </section>    <script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>