How would I refer to a specific html element that was just made in Javascript and get its value? -

my program takes in user input of string , checkbox , builds list displayed. (check-list basically) each list element consists of string variable , check-box input can't refer specific checkbox if third 1 ticked since id wouldn't unique in method. feel if there's better approach. i'm new stackoverflow apologize if code much, little, confusing, etc.

relevant code (imo):

var taskarr= []; //string of tasks array var comparr=[]; //comp = completed? task completion array, has bool var iscompleted = 0;  document.getelementbyid('list').addeventlistener('click',alternatevalue);  function alternatevalue(){     //recheck actual clicked boxes , updates array since list members not have unique id. way?      alert("click works!");     var newchecks = document.getelementsbyclass('');     //2nd alert, no alert. alert(newchecks[0].checked);     comparr = [];     for(i = 0; i<newchecks.length;i++){         comparr.push(newchecks[i].checked);     } }  function addtask(){     var check = document.getelementbyid('compinput').checked;     var task = document.getelementbyid('taskinput').value;     taskarr.push(task);     comparr.push(check);     alert(check);     //check correct value of.. check     update(); }     function update(){     var tasks = '<ul>';     for(i =0; i< taskarr.length;i++){         if(comparr[i] == 0){             tasks = tasks.concat('<li>'+taskarr[i]+'<input type="checkbox" class="texts" placeholder="done?"/></li>');          }         else{             tasks = tasks.concat('<li>'+taskarr[i]+'<input type="checkbox" class="texts" checked placeholder="done?"/></li>');         }     }     tasks = tasks.concat('</ul>');           document.getelementbyid('list').innerhtml = tasks;       document.getelementbyid('comps').addeventlistener('click',alternatevalue); } 

instead of referring checkboxes id's can refer them using class giving them class="texts"

html:

<input class="texts" type="checkbox" value="a"/>a <input class="texts" type="checkbox" value="b"/>b <input class="texts" type="checkbox" value="c"/>c 

using javascript: javascript demo

if want pure javascript solution need create event handler handles events on checkboxes class="texts". once event created can use attaching function , perform required operations within function.

<script>     var classname = document.getelementsbyclassname("texts");     (var = 0; < classname.length; i++) {         classname[i].addeventlistener('click', myfunction);     }      function myfunction(e) {          //accessing checked value of textbox         var val = e.target.value;         alert(val);          //do whatever want "val"      } </script> 

using jquery: jquery demo

if want use jquery can write below script instead of above javascript.

$(document).ready(function(){     $(".texts").change(function(){         if(this.checked){             alert($(this).val());             //perform whatever want on clicked checkbox         }     }); }); 

hope helps!