Question

I’m just wondering if its possible in javascript to get more than one id at a time, without the use of JQuery. I’m checking the background color of each cell in a dynamically created table. For instance, I have this code:

var black = "rgb(0, 0, 0)";
if(document.getElementById("cell1").style.backgroundColor == black &&
   document.getElementById("cell2").style.backgroundColor == black)
{
  alert("Two cells are black!");
}

Would it be possible to do something like this:

var black = "rgb(0, 0, 0)";
if(document.getElementById("cell1","cell2").style.backgroundColor == black)
{
  alert("Two cells are black!");
}

I’m trying not to use JQuery at all as I’m not too familiar with it.

Answer 1

With modern browsers you can do something similar using querySelectorAll (compatibility matrix), but you’d still have to loop over the resulting NodeList:

var nodes = document.querySelectorAll("#cell1, #cell2");
var count = 0;
for (var index = 0; index < nodes.length; ++index) {
    if (nodes[index].style.backgroundColor == black) {
        ++count;
     }
}
if (nodes.length === count) {
    alert("Both are black");
}

Doesn’t really buy you anything over, say:

var cells = ["cell1", "cell2"];
var count = 0;
for (var index = 0; index < cells.length; ++index) {
    if (document.getElementById(cells[index]).style.backgroundColor == black) {
        ++count;
    }
}
if (cells.length === count) {
    alert("All cells are black");
}

So in short: No, there isn’t really anything more useful you can do.