HTML data attribute not changing

Question

I have this Html code that in the each paragraph tag has two data attributes 'data-tag' and 'data-name'. I also have two buttons, 'Show Data' and 'Set Data'.

The Show Data button displays the paragraph data attributes on console correctly.

When I click on Set Data, it should change all paragraph tags with the data attribute 'tag' to 'Complete' but it's not working. What am I doing wrong?

$("document").ready(function() {
  // Shows data attributes in console - WORKING
  $("#showdata").click(function() {
    $("p").each(function() {
      var tag = $(this).data("tag");
      var name = $(this).data("name");
      console.log(tag);
      console.log(name);
    });
  });

  // Change data attibute 'tag' - NOT WORKING
  $("#setdata").click(function() {
    $("p").each(function() {
      $(this).data("tag", "Complete");
      console.log($(this).data("tag"));
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p data-tag="tag1" data-name="p1">Item 1</p>
<p data-tag="tag2" data-name="p2">Item 2</p>
<p data-tag="tag3" data-name="p3">Item 3</p>

<button class="button" id="showdata">Show data</button>
<button class="button" id="setdata">Set data</button>

I made you a snippet that will show complete when you click - your tag=setTag does not return the data of the tag — mplungjan, Jul 03 '21 at 11:06
@TJCrowder the duplicate you marked does not answer the question the OP is asking. — Rory McCrossan, Jul 03 '21 at 11:08
`var tag=$(this).data("tag", "Complete")` uses *chaining* - so returns `$(this)`. If you click show, then set, then show again, you can see that it is setting it correctly (using the original v1 of the question, not necessarily the edit), but you're (were) simply outputting the wrong value. — freedomn-m, Jul 03 '21 at 11:21

score 0 · Accepted Answer · answered Jul 03 '21 at 11:06

0

The issue is because in the #setdata click handler tag holds a jQuery object as you're calling the setter of data(). It does not hold the value of the data attribute.

To do that you need to call the getter of data(), as you do in the #showdata click handler.

Also note that you don't need the each() loop when setting the same data() value on all the p elements.

let getData = () => {
  $("p").each(function() {
    var tag = $(this).data("tag"); // getter
    var name = $(this).data("name"); // getter
    console.log(tag, name );
  });
}

$("document").ready(function() {
  $("#showdata").click(getData);

  $("#setdata").click(function() {
    $("p").data("tag", "Complete"); // setter
    getData();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p data-tag="tag1" data-name="p1">Item 1</p>
<p data-tag="tag2" data-name="p2">Item 2</p>
<p data-tag="tag3" data-name="p3">Item 3</p>

<button class="button" id="showdata">Show data</button>
<button class="button" id="setdata">Set data</button>

answered Jul 03 '21 at 11:06

Rory McCrossan

331,213
40
305
339

I'd say a comment would have been enough for this question – mplungjan Jul 03 '21 at 11:07
I'd say that answering a question by editing it isn't the correct approach. – Rory McCrossan Jul 03 '21 at 11:08
It is if the idea is to close and delete it – mplungjan Jul 03 '21 at 11:08
1

Especially if OP cannot delete because there are answers which are [dupes](https://stackoverflow.com/questions/13524107/how-to-set-data-attributes-in-html-elements) if the dupes are not 100% what you want to say, then I am sure there is another dupe that is – mplungjan Jul 03 '21 at 11:11
Comment war between two jQuery legends, interesting :). – 4b0 Jul 03 '21 at 11:18
Personally, I'd vote to close it as a typo as OP is simply outputting the wrong thing :) – freedomn-m Jul 03 '21 at 11:22
1

@Shree haha! I mean no mal-intent to mplungjan at all, he's someone I have a lot of respect for, in fact. However IMO this question is well formed and deserving of an answer. The first two duplicates are regarding the common data/attr misunderstanding so not relevant here. The third dupe is closer as it explains the difference between the getter/setter, but still doesn't give a solution to the OP's specific case, or help them understand why they saw the output they did. Perhaps this is better discussed on meta now though, as it's quite OT. – Rory McCrossan Jul 03 '21 at 11:29
Definitely should *not* answer/fix the question by editing the question - equally so if the intent is to close (thus delete) as it would be lost anyway. – freedomn-m Jul 03 '21 at 11:51

HTML data attribute not changing

1 Answers1