Adding attribute to HTML element causing attr is not a function

Question

I have a HTML element with an ID: containerButtons for which have a number of labels and div:

<div class="button-grp" id="containerButtons">
    <label>Selector 1</label>
    <label>Selector 2</label>
    <label>Selector 3</label>
    <div class="time-container">
        <input type="number" min="0" max="24" step="1" value="00" id="time-hour" disabled="disabled">
        <span>:</span>
        <input type="number" min="0" max="60" step="1" value="00" id="time-minutes" disabled="disabled">
    </div>
</div>

The above is created through a JS function in file, buttons.js.

buttons.js:

function ButtonsPanel() {

    var that = this;
    this.buttonsEl = document.createElement('div');

    var baseBtn = d3.select(this.buttonsEl);

    var containerBtns = baseFilter.append('div')
        .classed({'button-grp': true})
        .attr({id:'containerButtons'});


    var tmp = containerBtns.append('div')
        .classed({'time-container': true});

    tmp.append('input')
        .attr({type: 'number', min: '0', max: '24', step:'1', value:'00', id:'time-hour', 'disabled': 'disabled'});

    tmp.append('span')
        .text(':');

    tmp.append('input')
        .attr({type: 'number', min: '0', max: '60', step:'1', value:'00', id:'time-minutes', 'disabled': 'disabled'});

    this.timeInputs = tmp;

    var timeHours = this.timeInputs[0][0].children[0];
    // returns <input type="number" min="0" max="24" step="1" value="00" id="time-hour" disabled="disabled">
    var timeMins = this.timeInputs[0][0].children[2];
    // returns <input type="number" min="0" max="60" step="1" value="00" id="time-minutes" disabled="disabled">

}

Within buttons.js, i have a method which is called on load toggleVisability:

ButtonsPanel.prototype.toggleVisability = function() {

    var that = this;

    this.visabilityApply('#containerButtons', function(num) {
        if (!num) {
            alert(that.timeInputs[0][0].children[0]);
            that.timeInputs[0][0].children[0].attr({'disabled': true});
        }
        else {
            alert(that.timeInputs[0][0].children[0]);
            that.timeInputs[0][0].children[0].attr({'disabled': null});
        }
    });
};

With the above, i get error:

TypeError: that.timeInputs[0][0].children[0].attr is not a function

Yet, if i apply:

that.timeInputs.attr({'disabled': true});

The above works fine, however, i want to toggle the disabled attributes on the input fields. I am using jQuery.

Using jQuery , this code would have looked far better and understandable . I can see you have tagged jQuery as well. Do you wish to use it ? — Tushar Gupta
– Tushar Gupta, Commented Apr 4, 2016 at 11:21
please create fiddle for your code base, that will be nice to understand :-) — Manish Kumar
– Manish Kumar, Commented Apr 4, 2016 at 11:23
@TusharGupta - i am using jquery in the project, although not that much in the file. — Oam Psy
– Oam Psy, Commented Apr 4, 2016 at 11:25

haim770 · Accepted Answer · 2016-04-04 11:23:08Z

4

attr() is a jQuery function, and as such, needs to be invoked on a jQuery context.

In your case:

that.timeInputs[0][0].children[0]

Returns a native DOM element that doesn't expose an attr() function, thus the error (while that.timeInputs is still referencing a jQuery context).

Try this instead:

$(that.timeInputs[0][0].children[0]).attr({'disabled': true});

answered Apr 4, 2016 at 11:23

haim770

49.2k7 gold badges113 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tushar Gupta · Accepted Answer · 2016-04-04 11:31:37Z

1

If you still wish to go with Javascript , you can use setAttribute() like

that.timeInputs[0][0].children[0].setAttribute("disabled", "true");

answered Apr 4, 2016 at 11:31

Tushar Gupta

16k1 gold badge33 silver badges53 bronze badges

Comments

madalinivascu · Accepted Answer · 2016-04-04 11:42:32Z

1

Remove the brakets {} whrap the variable in jquery

$(that.timeInputs[0][0].children[0]).attr('disabled': true)

answered Apr 4, 2016 at 11:42

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Collectives™ on Stack Overflow

Adding attribute to HTML element causing attr is not a function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related