How do I access custom html attributes in javascript?

Question

Hi im facing problem in this html document please help me

Im very new to this.

May be i am fool to missing something out.

I have put only useful source here to solve please.

<!DOCTYPE html>
<html>
  <body id="owner_profile">
    <a id="buy" owner="789" token="1000" wrapper="purchase" name="oname">Hurray!</a><br>
    <script>
      document.write("You Have: ");
      document.write(document.getElementById('buy').token);
    </script>  
  </body>
</html>

I want it to display token but its giving undefined

Result is :

Hurray!

You Have: undefined

Niet the Dark Absol · Accepted Answer · 2012-09-08 04:58:40Z

12

There is a difference between attributes and properties. To get the attribute, use getAttribute("token").

Many (predefined) attributes are mapped to properties (or the other way around, I don't know). So for example if you set a cell's colSpan property, you will also affect its colspan attribute.

However sometimes the two are very different. Most notably, the value attribute of an input will NOT change if you type in the box. However the value property will. This means that you can always reset a textbox with elem.value = elem.getAttribute("value").

As a general rule, you should always use get/setAttribute to change an elements attributes, because you can't rely on the property being there.

Side-note: Those "attributes" should be data:

<a id="buy" data-owner="789" data-token="1000" data-wrapper="purchase" name="oname">

answered Sep 8, 2012 at 4:58

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

1 Comment

katspaugh Over a year ago

Also, in most browsers you can access data--attributes directly via dataset property. E.g. document.getElementById('buy').dataset.token.

Sean Johnson · Accepted Answer · 2012-09-08 05:01:27Z

2

You'll need to use .getAttribute('token') instead of .token, since "token" isn't a valid HTML attribute.

<script>
document.write("You Have: ");
document.write(document.getElementById('buy').getAttribute("token"));
</script>

Working JSFiddle: http://jsfiddle.net/AvKbn/

edited Sep 8, 2012 at 5:01

answered Sep 8, 2012 at 4:59

Sean Johnson

5,6172 gold badges19 silver badges23 bronze badges

2 Comments

Fabrício Matté Over a year ago

I'd word "not valid" as "custom" instead, yeah browsers don't know what to do with it and it doesn't pass W3C validator, but it's not like it breaks anything. Anyway, I'd recommend using a data- attribute for validness.

theking2 Over a year ago

adding to that. Perhaps single word attributes will be a problem as they might find their way in the standard (token is not a good choice). I´d stick with multi word attributes like the official data- but feel fine using a custom- prefix just to be sure and future sane.

Collectives™ on Stack Overflow

How do I access custom html attributes in javascript?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related