how to get html data attribute in javascript?

Question

How do I get the data attributes "name" and "description" in javascript? (user clicks on button, display value)

<form action="http://serverhost/postdata" method="POST">
  <script src="myscript.js" class="blue-button" 
  data-name="aaa" 
  data-description="bbb"
  </script>
< /form>

Possible duplicate of Get list of data-* attributes using javascript / jQuery — miken32
– miken32, Commented Apr 6, 2018 at 23:32
@RandyCasburn It's got both. But you like this one better? stackoverflow.com/questions/33760520/… Or this one: stackoverflow.com/questions/16566299/… — miken32
– miken32, Commented Apr 6, 2018 at 23:33
Possible duplicate of get data attributes in JavaScript code — DrevanTonder
– DrevanTonder, Commented Apr 6, 2018 at 23:35
They are all sooooo indirect. This is a simple, direct question. Requires a simple, direct answer. But the folks with giant rep like you can decide. :-) — Randy Casburn
– Randy Casburn, Commented Apr 6, 2018 at 23:40

Randy Casburn · Accepted Answer · 2018-04-06 23:31:38Z

4

Like this:

document.querySelector('script.blue-button').dataset

Here is the reference:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

answered Apr 6, 2018 at 23:31

Randy Casburn

14.2k1 gold badge19 silver badges32 bronze badges

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

Comments

Sheshank S. · Accepted Answer · 2018-04-06 23:36:08Z

1

First you should close the opening script tag (makes the syntax high lighting work and is easier to read)

<form action="http://serverhost/postdata" method="POST">
  <script src="myscript.js" class="blue-button" 
  data-name="aaa" 
  data-description="bbb">
  </script>
</form>

Then all you would have to do is

document.querySelector('script.blue-button').dataset

answered Apr 6, 2018 at 23:36

Sheshank S.

3,3184 gold badges24 silver badges42 bronze badges

Collectives™ on Stack Overflow

how to get html data attribute in javascript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related