How can I refer to a specific html element that was just created in Javascript and get its value?
My program takes user input string and checkbox and creates a list to display. (Mostly a checklist). Each list item consists of a string variable and a checkbox input, but I can't reference a specific checkbox if I say the third one will be checked, as the ID won't be unique in this method. It seems to me that there is a better approach. I'm new to stackoverflow, so I apologize if the code is too much, too 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 all the actual clicked boxes and updates the array since the list members do not have a unique id. Another 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 for correct value of.. the 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);
}
source to share
Instead of referencing checkboxes with theirs id's
, you can refer to them using the class you give themclass="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 only: JavaScript demo
If you want to use a pure JavaScript solution, you need to create an event handler that handles events on checkboxes with class="texts"
. After creating an event, you can use it by connecting a function to it and performing the necessary operations inside the function.
<script>
var classname = document.getElementsByClassName("texts");
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction);
}
function myFunction(e) {
//accessing checked value of the textbox
var val = e.target.value;
alert(val);
//do whatever you want with "val"
}
</script>
Using jQuery: jQuery demo
If you want to use jQuery you can write below script instead of the above JavaScript.
$(document).ready(function(){
$(".texts").change(function(){
if(this.checked){
alert($(this).val());
//perform whatever you want to do on clicked checkbox
}
});
});
Hope this helps!
source to share