HTML5 Attribute Manipulation: Vanilla JS vs. jQuery

Question

How come changing elements' attribute values in vanilla JS and jQuery sometimes don't work similarly? One scenario is the experiment I created, where whenever the "Show password" button is being clicked, the password field's type attribute value is supposed to change into text when it is password, and vice versa. It worked successfully in vanilla JS but not in jQuery. In jQuery, the attribute value changes to text, but when I want to change it back to password, it won't work. Why does such issue occur?

Vanilla JS

document.querySelector('.show-password').onclick = function() {
    if(document.querySelector('#password').type == 'password') {
        document.querySelector('#password').type = 'text';
    } else {
        document.querySelector('#password').type = 'password';
    }
}

jQuery

$('.show-password').click(function() {
    if($('#password').attr('type', 'password')) {
        $('#password').attr('type', 'text');
    } else {
        $('#password').attr('type', 'password');
    }
});

It should be if($('#password').attr('type') == 'password'). Rubberduck-debug your code. There’s no reason 7 lines of code should fail. — Sebastian Simon
– Sebastian Simon, Commented Oct 13, 2016 at 2:24

francordie · Accepted Answer · 2016-10-13 07:31:42Z

6

Because if($('#password').attr('type', 'password')) is not asking if the type attribute is 'password'. It is setting type=password and returning a jQuery object to the if statement.

When .attr() is used with only one parameter, it gets that attribute from the selected element, so yo can do it using $("#password").attr("type") == "password".

edited Oct 13, 2016 at 7:31

answered Oct 13, 2016 at 2:38

francordie

6185 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

HTML5 Attribute Manipulation: Vanilla JS vs. jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related