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

Question

My program takes in user input of a string and checkbox and builds up a list to be displayed. (Check-list basically) Each list element consists of a string variable and a check-box input but I can't refer to a specific checkbox if say the third one would be ticked since the ID wouldn't be unique in this method. I feel as if there's a better approach. I'm new to stackoverflow so I apologize if the code is too 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 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);
}

I have updated my answer for a pure JavaScript approach – Saumil Jun 14 '15 at 10:25 — Saumil, Jun 14 '15 at 10:25

Saumil · Accepted Answer · 2015-06-14T19:31:31.503

Instead of referring the checkboxes with their id's you can refer to them using the class you are 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 only JavaScript: JavaScript demo

If you want a pure JavaScript solution then you need to create an event handler that handles the events on the checkboxes with class="texts". Once the event is created you can use it by attaching a function to it and perform your required operations within 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 the 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!

Thank you! I came across getElementsByClassName but went on a completely weird approach at it. — Jorge Nicasio, Jun 14 '15 at 14:16
@JorgeNicasio glad it helped, you can accept the answer if you think it was helpful :) — Saumil, Jun 14 '15 at 15:26
Oh! Thank you for telling me! Is there anything else that I'm missing? Stackoverflow-wise. — Jorge Nicasio, Jun 14 '15 at 15:37
@JorgeNicasio thanks for accepting the answer. According to Stackoverflow guidelines you should Upvote and Accept the answer to encourage users in helping you out. BTW I have updated my answer a bit to show both the approach using JavaScript and with jQuery along with demo. Hope it helps — Saumil, Jun 14 '15 at 15:41

score 1 · Answer 2 · edited May 23 '17 at 11:51

1

I would prefer .on over .change because the former can use less memory and work for dynamically added elements.

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

Reference

edited May 23 '17 at 11:51

Community

1
1

answered Jun 14 '15 at 10:25

Sachin I

1,500
3
10
29

the OP didn't specified jQuery as a tag – Saumil Jun 14 '15 at 10:25
I'll keep this in mind since I'm not quite experienced at Javascript yet. But I'll move onto using JQuery afterwards! – Jorge Nicasio Jun 14 '15 at 14:19

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

2 Answers2