How do I make a javascript function work for a number of the same components individually?

Asked

Viewed 38 times

0

For example: I have this function that checks if the checkbox is checked, but it works in general and not individually since these components are within a table, the components are generated in this way:

     var table = $('#tableproduct').DataTable();

                    results.Nfe.Produtos.forEach(function (element) {

                        var rowNode = table
                            .row.add(['<input type="checkbox" name="check" onChange="verificarCheckBox() " />',
                                element.Codigo,
                                element.Descricao,
                                '<input type="number" class="form-control " style="text-align:right; margin: 3px;" value=' + element.ValorUnitario + '  id="valor" onChange="calcular()" readonly /> ',
                                '<input type="number" class="form-control" style="text-align:right; margin: 3px;" value= ' + element.Qtd + '  id = "quantidade" readonly onChange="calcular() "/>',
                                '<input type="number" class="form-control " style="text-align:right; width: 177px; margin: 3px;"  value="0"   id="quantidade_devolvida"  readonly onChange="calcular(), verificarCheckBox()"/>',
                                '<input type = "number" class= "form-control" style = "text-align:right; margin: 3px;" value="0" id="var_qnt"  onChange="calcular()" readonly />'
                            ])
                            .draw()
                            .node();

And the function that checks the checkbox is this one:

 function verificarCheckBox() {
    var check = document.getElementsByName("check");

    for (var i = 0; i < check.length; i++) {
        if (check[i].checked == true)
        {
            document.getElementById("quantidade_devolvida").readOnly = false;
            document.getElementById("quantidade_devolvida").style.borderColor = "rgba(60, 141, 188, 0.5)";
            document.getElementById("quantidade_devolvida").style.boxShadow = "rgba(60, 141, 188, 0.77) 0px 0px 6px";
        }
        else if (check[i].checked == false)
        {
            document.getElementById("quantidade_devolvida").value = 0;
            document.getElementById("var_qnt").value = 0;
            document.getElementById("quantidade_devolvida").readOnly = true;
            document.getElementById("quantidade_devolvida").style.borderColor = "rgba(154, 154, 154, 0.51)";
            document.getElementById("quantidade_devolvida").style.boxShadow = "rgb(253, 250, 250) 0px 0px 6px";
        }
    }
}
  • the elements are all with the same ID?

  • Yes, they are, yes.

  • Try using an id for each :D element

  • So my friend, the problem is that these lines are generated automatically, there would be no way to create the components with different ids. Would you have any other alternative?

  • When you do that: document.getElementById("quantidade_devolvida").value = 0;, is referencing the element with id quantidade_devolvida, that is, as all elements have the same ID it adopts this behavior.. you would post the table html after created?

  • The table that is generated is a datatable and the rows are generated in this table dynamically as shown in the first code.

  • take a look at this thumb drive

  • On the pen the code is working perfectly, but when I put it into production in my application the error: "Uncaught Typeerror: Cannot read Property 'childNodes' of Undefined" is introduced, would know how to help me fix this problem?

  • i would need an example of the html generated from your table after the page is rendered

  • Actually your big problem is in defining multiple id’s equal.. Take a look at this one another question of stackoverflow itself

Show 5 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.