Putting information in a html property to be accessible in a JS function

Question

In the below code I have made up a property called 'foo' in the html button element. I want to be able to access that someway in the javascript function being called by 'onclick'

What I actually get if I try to call it in the same way as I would call the ID is 'undefined'

Or maybe there is some other way to send some data to the function that is not in the ID or value.

Here is a JS fiddle to demonstrate

https://jsfiddle.net/ftpeyrux/1/

function assignAllClick(button) {
                            document.write('This is "foo": ' + button.foo + '<br>and this is "ID": ' + button.id);
                            }

<button type="button" id="1" onclick="assignAllClick(this)" value="2" foo="test">Test</button>

*"In the below code I have made up a property called 'foo' in the html button element."* Um....where? The word "foo" doesn't appear anywhere in your questino other than in that sentence. — T.J. Crowder, Feb 09 '18 at 14:26
Also NEVER use document.write after the page has rendered. It will wipe the page. To add an attribute to your tag - use `data-foo` and `button.getAtrribute("data-foo")`: https://jsfiddle.net/mplungjan/j5kja57q/ — mplungjan, Feb 09 '18 at 14:27
You'll most likely want to read up on [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) — gpgekko, Feb 09 '18 at 14:28
I tried to edit this, but for clarity my question is can I embed data into a html element that can be accessed by a javascript function called by onload that is not in the ID or value section. — David H, Feb 09 '18 at 14:28
Check out the [MDN docs](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) — kevinSpaceyIsKeyserSöze, Feb 09 '18 at 14:29
@T.J.Crowder apologies, I updated the fiddle with foo but not the snippet in the question so it was missing. I would never normally use document.write I just wrote that snippet to isolate the relevant code for the question. — David H, Feb 09 '18 at 14:37

score 4 · Accepted Answer · answered Feb 09 '18 at 14:28

What I actually get if I try to call it in the same way as I would call the ID is 'undefined'

Only official attributes have reflected properties. If you want to get an attribute that doesn't have a reflected property from an element, you use getAttribute:

console.log(button.getAttribute("foo")); // if the attribute is called foo

Live Example:

function assignAllClick(button) {
  console.log('This is "data-foo": ' + button.getAttribute("data-foo"));
}

<button type="button" id="1" onclick="assignAllClick(this)" value="2" data-foo="I'm foo">Test</button>

Side note 1: If putting your own non-standard attributes on elements, always use the data- prefix. E.g., data-foo, not foo. (I've done that in the example above.) More in the HTML standard.

Side note 2: You don't call properties, you access them (or read them or get their value, etc.). You call functions, methods, and constructors.

Putting information in a html property to be accessible in a JS function

1 Answers1