Why isn't querySelectorAll working with my ID values?

Question

I use this piece of code for a live searching and for calculate the "Total" :

$('#search').keyup(function () {
    var x = [];
    var y = [];
    var $total = 0;
    var inputString = $("#search").val();

    var act = document.getElementById("labdb").value;

    $('td:first-child').parent().show();
    $('td:first-child').parent().addClass("notHide");
    $('td:first-child').parent().removeClass("toHide");

    $var = $('td:first-child').parent('tr:not(:icontains(' + inputString + ')):not(:contains("Total"))');

    $var.hide();
    $var.addClass('toHide');
    $var.removeClass('notHide')

    for (var price of document.querySelectorAll('tr.notHide td.price')) {   
           x.push(parseFloat(price.innerText));
    }
    for (var cantidad of document.querySelectorAll('tr.notHide td.quantity')) {
        y.push(parseFloat(cantidad.innerText));
    }    
    for(var i = 0; i <= x.length-1; i++){
        $total += x[i] * y[i];
        
    }
    document.getElementById("total"+act).innerText = $total.toFixed(2);
});

I have various tables, with differents ID's, first is id='0', second is id='1', etc. I use collapse ('show') or ('hide') for show the selected table with a selector. So, the problems comes when I try to calculate the "Total", It's calculated with the value of the class "notHide" and "price/quantity". And all the tables get this Class, so the price got crazy if there is more than 1 table with "Total"

I KNOW, that I need to specify the ID of the table to work around, but I cant.

I have tested with:

var act = document.getElementById("labdb").value;
var actHTML = document.getElementById("labdb");

It get the ID from the selected table, and then, in this part of code include it:

for (var price of actHTML.document.querySelectorAll('tr.notHide td.price')) {   
       x.push(parseFloat(price.innerText));
}
for (var cantidad of actHTML.document.querySelectorAll('tr.notHide td.quantity')) {
    y.push(parseFloat(cantidad.innerText));
}

But that, dont work, Im all the time thinking about other solutions and trying it, but I cant. Its the final part of that page. Only need to specify the ID of the "Total" calculator.

I had tried to with:

for (var price of document.querySelectorAll('#'+act+' tr.notHide td.price')) {   
           x.push(parseFloat(price.innerText));
    }
    for (var cantidad of document.querySelectorAll('#'+act+' tr.notHide td.quantity')) {
        y.push(parseFloat(cantidad.innerText));
    }

For be more specific, I need that document.querySelectorAll('tr.notHide td.quantity') comes from a specific ID. For the rest, works perfectly, inclusive deleting the others tables with the parameter Total

EDIT_0:

I have do that:

let myTable = document.querySelector("#"+act);
let all = myTable.querySelectorAll('tr.notHide td.price');

for (var price of all) {
    x.push(parseFloat(price.innerText));
}
for (var cantidad of all) {
    y.push(parseFloat(cantidad.innerText));
}
for (var i = 0; i <= x.length - 1; i++) {
    $total += x[i] * y[i];

}

from here: LINK

And that is the console error:

scripts.js:57 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#0' is not a valid selector. at changePrice (https://neutrino.ugr.es/js/scripts.js:57:28) at HTMLSelectElement. (https://neutrino.ugr.es/js/scripts.js:15:5) at HTMLSelectElement.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js:2:43336) at y.handle (https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js:2:41320)

You seem to be mixing jQuery and vanilla JS DOM queries, which isn't generally ideal. If you are including jQuery you may as well make use of it for everything. — DBS, Feb 01 '23 at 13:38
@DBS thanks for all! but the error was that querySelectorAll dont works if the ID start with a digit. — Sourc3w, Feb 01 '23 at 14:58
`actHTML.document.querSelectorAll` should not have the `document` — epascarello, Feb 01 '23 at 15:11

score 1 · Accepted Answer · edited Feb 02 '23 at 13:46

Well I found the error. The method document.querySelectorAll('') doesn't work if the ID starts with a digit. Like said in an article on the subject:

The spec defines identifiers using a token diagram. They may contain the symbols from a to z, from A to Z, from 0 to 9, underscores (_), hyphens -, non-ASCII symbols or escape sequences for any symbol. They cannot start with a digit, or a hyphen (-) followed by a digit. Identifiers require at least one symbol (i.e. the empty string is not a valid identifier).

This is the final code:

$('#search').keyup(function () {

    var inputString = $("#search").val();

    $('td:first-child').parent().show();
    $('td:first-child').parent().addClass("notHide");
    $('td:first-child').parent().removeClass("toHide");

    $var = $('td:first-child').parent('tr:not(:icontains(' + inputString + ')):not(:contains("Total"))');

    $var.hide();
    $var.addClass('toHide');
    $var.removeClass('notHide')

    changePrice();
});

function changePrice() {
    var x = [];
    var y = [];
    var $total = 0;
    var act = document.getElementById("labdb").value;
    actt="t"+act+act;
    //alert(act);

    var myTable = document.querySelector("#"+actt);
    var allx = myTable.querySelectorAll('tr.notHide td.price');
    var ally = myTable.querySelectorAll('tr.notHide td.quantity');
    //alert(all)

    for (var price of allx) {
        x.push(parseFloat(price.innerText));
    }
    for (var cantidad of ally) {
        y.push(parseFloat(cantidad.innerText));
    }
    for (var i = 0; i <= x.length - 1; i++) {
        $total += x[i] * y[i];

    }
    //alert(x.length)
    document.getElementById("total" + act).innerText = $total.toFixed(2);
}

I changed the ID to start with a t: actt="t"+act+act; (act+act is because id is 00, not 0)

Why isn't querySelectorAll working with my ID values?

1 Answers1