Uncaught TypeError: Object #<HTMLInputElement> has no method 'datepicker'

Question

I have the following html:

<table>
    <tr>
        <td>
            <select id="one">
                <option>some option</option>
                <option>some option</option>
                <option>some date</option>
                <option>some option</option>
                <option>some date</option>
            </select>
        </td>
        <td>
            <select id="two">
                <option>some option</option>
                <option>some option</option>
                <option>some date</option>
                <option>some option</option>
                <option>some date</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="text" id="1" /></td>
        <td><input type="text" id="2" /></td>
    </tr>
</table>

and the following javascript:

$("select").change(function() {
    var element = this;
    var value = $('#one').find(":selected").text();
    var id = ""
    if(value.match(/date/)) {
        switch(element.id) {
            case "one":
                id = "1";
                break;
            case "two":
                id = "2";
                break;
        }
    }

    addDatePicker(id);
});

function addDatePicker(id) {
    var element = document.getElementById(id);
    $(function() {
        element.datepicker();
    });
}

In chrome I get the error that I have put as the title to the question. I have alerted the id variable in the addDatePicker() function and I get the right value so I'm not sure why I get that error.

Answer 1

You'll need a jQuery object for that

function addDatePicker(id) {
    $('#' + id).datepicker();
}

And place the change event handler inside DOM ready, not DOM ready inside the addDatePicker function