So I have a HTML grid where each box is labeled using the following convention. Each box has an ID labeled as row\_column. I want to create a method that scans the document and returns an array that contains only the boxes with a specific column number. For example, if I call the function below, it should return an array of boxes that, if I call it with the number 2, would return (1\_2, 2\_2, 3\_2 and 4\_2).

```
  function getBoxesByColumn(columnNumber){
        return document.getElementById("?_" + columnNumber);
    }

```

From there, I would use the function to create an array in another function in this way:

```
function test(){
    var boxes = getBoxesByColumn(1);
    console.log(boxes);

```

However, when I call the console, it prints only a null value. Why is that?

EDIT:

Example of my HTML (contains 2 more rows)

```
        <div id = "game_background">

        <!-- Row 1 --> 

        <div id = "row_1" class = "row">

            <div id = "1_1" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "1_2" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "1_3" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "1_4" class = "box_empty">
                <p class = "v"></p>
            </div> 

        </div>

        <!-- Row 2 --> 
        <div id = "row_2" class = "row">

            <div id = "2_1" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "2_2" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "2_3" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "2_4" class = "box_empty">
                <p class = "v"></p>
            </div>
        </div>

```

Alex