JavaScript question: Passing data attributes into a function

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Locked
Bethrezen
Posts: 445
Joined: September 13th, 2003, 11:56 am

JavaScript question: Passing data attributes into a function

Post by Bethrezen »

Ok so if I want to get the id or class of a parent element and then pass it in to a function so that I can do stuff with it I can do so like this.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>

<div id="test_id">

  <div>
    <button onclick="send(closest('#test_id'))">alert id</button>
  </div>

</div>

<div class="test_class">

  <div>
    <button onclick="send(closest('.test_class'))">alert class</button>
  </div>

</div>

<script>

function send(parent)
{
  if(parent.id == "test_id")
  {
    alert(parent.id);
  }

  if(parent.className == "test_class")
  {
    alert(parent.className);
  }
}

</script>

</body>
</html>
What I can’t seem to figure out is how to do the same thing for the data attributes because although the closest() method will accept any valid CSS selector like this for example

Code: Select all

closest('[data-name="test_data_attribute"]')
as soon as I try to put this inside the onclick=" " event the extra set of quotes messes everything up and it wont work.

so my question is how do I do the above only for data attributes instead of Classes and IDs
morat
Posts: 6404
Joined: February 3rd, 2009, 6:29 pm

Re: JavaScript question: Passing data attributes into a func

Post by morat »

Try this:

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
<div class="test">
  <button onclick="alert(this.closest('div.test').className)">Alpha</button>
  <button onclick="alert(this.closest('div[class="test"]').className)">Beta</button>
</div>
</body>
</html>
Element closest
http://developer.mozilla.org/docs/Web/A ... nt/closest

How do I properly escape quotes inside HTML attributes?
http://stackoverflow.com/questions/4015345
Bethrezen
Posts: 445
Joined: September 13th, 2003, 11:56 am

Re: JavaScript question: Passing data attributes into a func

Post by Bethrezen »

Ok so after tinkering some more and going through about a zillion different websites with really unclear and difficult to follow explanations I’ve discovered that getting the parent data attribute is actually pretty simple all you need to do is this

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>

<div data-name="test_data_attribute">

  <div>
    <button onclick="send(closest('[data-name]'))">alert data attribute</button>
  </div>

</div>

<script>
function send(parent)
{
  alert(parent.dataset.name);
}
</script>

</body>
</html>
This will loop up the dom till it finds a data attribute with a matching name and then send that into the function I can then access the value inside with the dataset property followed by the name of the data attribute.

I also learned that when accessing the data attribute the name must be in camel case so if my data attribute was called

Code: Select all

data-user-name
Then to send it and access it I would do

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>

<div data-user-name="test_data_attribute">

  <div>
    <button onclick="send(closest('[data-user-name]'))">alert data attribute</button>
  </div>

</div>

<script>
function send(parent)
{
  alert(parent.dataset.userName);
}
</script>

</body>
</html>
I also learned that if you trying to get a class but the class contains more then 1 value then the example in the opening post wont work as it will return both class values so if you only want to access 1 of them then instead of using .className to access the value what you need to do is use .classList followed by the index value of the class name you want to access.

So if you want to access just the first value then the index value would be [0] for the second value the index value would be [1] for the third value the index value would be [2] and so on

for example here I'm getting the second of 3 class names "test_class_2"

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>

<div class="test_class_1 test_class_2 test_class_3">

  <div>
    <button onclick="send(closest('.test_class_2'))">alert class</button>
  </div>

</div>

<script>
function send(parent)
{
  alert(parent.classList[1]);
}
</script>

</body>
</html>
While this might not seem very exciting I figure I’ll leave it here for the benefit of anyone else that is learning JavaScript and trying to get the parent id, parent class or parent data attribute, since this sort of thing is a pretty fundamental task which really isn't that well explained on most websites.
Locked