CODEWITHSUNDEEP
javascripthtmldom
Nicolas Bouvrette
Nicolas Bouvrette

Reputation: 4757

How to effectively define a custom HTMLElement attribute in Javascript so as to be able to set it using HTML?

As an example (please focus on the question, not the example - I have good reasons for this), I'm trying to add a new 'placeholder' attribute on an HTMLSelectElement object in Javascript. So I go like this:

<select id="gender" name="gender" placeholder="Male">
    <option></option>
    <option>Male</option>
    <option>Female</option>
    <option>Other</option>
</select>

Now if I run this, I get 'undefined':

var gender = document.getElementById('gender');
alert(gender['placeholder']);

So tried this approach to see if this would help:

HTMLSelectElement.prototype.placeholder = '';

But now I'm getting an empty string. Is there a simple way to access custom attributes on HTMLElements without having to loop through the HTMLElement.attributes one by one? Keep in mind I'm using Vanilla JS and some old browsers.

Upvotes: 3

Views: 76

Answers (2)

Steve Harris
Steve Harris

Reputation: 5109

Doesn't

HTMLSelectElement.prototype.placeholder = '';

Actually set it to an empty string?

In your example, you need to set the Male option to Selected rather than using a placeholder which is applicable to text inputs.

Upvotes: 0

scrappedcola
scrappedcola

Reputation: 10572

Just use getAttribute to grab the placeholder value: document.getElementById("gender").getAttribute("placeholder")

Upvotes: 5

Related Questions