id property returns null or undefined

Question

I am trying to get the ID property hanging off the getElementById method however it seems to return null or undefined. I have checked my HTML and it does in fact have an ID associated with it. I have given all my columns different ID's so having mulitple occurrences of the same ID is not the problem.

var columnID = $(this).closest(".col-md-4.column").id;
console.log(columnID);
var column = document.getElementById(columnID);

 <div class="row" id="columns">
<div class="col-md-4 column" id="col1">
    <div class="panel panel-default" draggable="true">
        <div class="panel-heading">
            <h3 class="panel-title">
                Panel title
                <span class="glyphicon glyphicon-pencil panel-icons"></span>
                <span class="glyphicon glyphicon-zoom-in panel-icons"></span>
                <span class="glyphicon glyphicon-trash panel-icons"></span>
            </h3>
        </div>
        <div class="panel-body" id="testchart">
            CHART GOES HERE
        </div>
    </div>

    <div class="panel panel-default" draggable="true">
        <div class="panel-heading">
            <h3 class="panel-title">
                Panel title
                <span class="glyphicon glyphicon-pencil panel-icons"></span>
                <span class="glyphicon glyphicon-zoom-in panel-icons"></span>
                <span class="glyphicon glyphicon-trash panel-icons"></span>
            </h3>
        </div>
        <div class="panel-body">
            World
        </div>
    </div>

    <div class="panel panel-default" draggable="true">
        <div class="panel-heading">
            <h3 class="panel-title">
                Panel title
                <span class="glyphicon glyphicon-pencil panel-icons"></span>
                <span class="glyphicon glyphicon-zoom-in panel-icons"></span>
                <span class="glyphicon glyphicon-trash panel-icons"></span>
            </h3>
        </div>
        <div class="panel-body">
            Hello
        </div>
    </div>
</div>
<div class="col-md-4 column" id="col2">

</div>
<div class="col-md-4 column" id="col3">

Hi @George worked like a charm put it as an answer to I can tick it? — Johnathon64, May 29 '15 at 10:08
one more way `var columnID = $(this).closest(".col-md-4.column").get(0).id;` — Suresh Ponnukalai, May 29 '15 at 10:14

score 4 · Accepted Answer · answered May 29 '15 at 10:07

4

Try this:

var columnID = $(this).closest(".col-md-4.column").attr('id');

answered May 29 '15 at 10:07

Prasanna

779
5
13

score 1 · Answer 2 · answered May 29 '15 at 10:07

1

There is no id property. Use .attr('id').

answered May 29 '15 at 10:07

Armand

23,463
20
90
119

score 0 · Answer 3 · answered May 29 '15 at 10:10

0

Try

$(this).closest(".col-md-4.column").attr('id')

The attributes have to be accessed with the .attr method

answered May 29 '15 at 10:10

George

6,630
2
29
36

id property returns null or undefined

3 Answers3