MozillaZine


JavaScript question: Passing data attributes into a function

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

Post Posted November 20th, 2021, 4:54 pm

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: 4951
Joined: February 3rd, 2009, 6:29 pm

Post Posted November 21st, 2021, 6:04 am

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=&quot;test&quot;]').className)">Beta</button>
</div>
</body>
</html>

Element closest
http://developer.mozilla.org/docs/Web/API/Element/closest

How do I properly escape quotes inside HTML attributes?
http://stackoverflow.com/questions/4015345

Bethrezen
 
Posts: 411
Joined: September 13th, 2003, 11:56 am

Post Posted November 22nd, 2021, 1:10 pm

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.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 3 guests