add data attribute dynamically

Question

My html is

<div id="ctup-ads-widget-2" class="caption slide-heading "  data-x="380" data-y="80" data-speed="1800" data-start="1200" data-easing="easeOutExpo">Hui</div>

I am trying to change the values of dat=x and data-y dynamically

I tried both below which did not work.

<script>
$('#ctup-ads-widget-2').click(function() {

    $(this).attr("data-x", "580");
});
</script>

and

<script>
$('#ctup-ads-widget-2').click(function() {
    $(this).data('x') = "580";
});
</script>

and

<script>
window.onload = function() {
    var anchors = document.getElementById('ctup-ads-widget-2');
    for (var i = 0; i < anchors.length; i++) {
        anchors[i].setAttribute('data-x', '580');
        anchors[i].setAttribute('data-y', '30');
    }
}
</script>

console screenshot

enter image description here

error screenshot

enter image description here

$(this).data('x') = "580"; is syntactically wrong.... $(this).attr("data-x", "580"); should work... how are you saying it is not working — Arun P Johny
– Arun P Johny, Commented Jun 4, 2015 at 5:15
If you are using data-api to access the value then need to use $(this).data("x", "580"); — Arun P Johny
– Arun P Johny, Commented Jun 4, 2015 at 5:15
Probably, your DOM is not loaded at the moment of your script execution. Use jQuery document ready or window.onload functions. — Yeldar Kurmangaliyev
– Yeldar Kurmangaliyev, Commented Jun 4, 2015 at 5:22

Zee · Accepted Answer · 2015-06-04 05:20:16Z

3

You can't use it like

$(this).data('x') = "580";//won't work

Try with data()

 $(this).data("x","580"); //$(this).attr("data-x", "580") should also work

Update

Enclose it in $(document).ready..

$(document).ready(function(){
  $('#ctup-ads-widget-2').click(function() {
    $(this).data("x","580");
  });
})

edited Jun 4, 2015 at 5:20

answered Jun 4, 2015 at 5:14

Zee

8,4805 gold badges39 silver badges59 bronze badges

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

6 Comments

Melvin Over a year ago

Zee Over a year ago

@Melvin Screenshot is fine but you need to tell us which line you are getting that error.

Zee Over a year ago

@Melvin Have you included jQuery?

Melvin Over a year ago

Melvin Over a year ago

included in footer .. i have added the script to header .. is that be a pblm?

|

avk87 · Accepted Answer · 2015-06-04 05:46:20Z

0

If data-attribute needs to be dynamically added on an element,

$("this").attr("data-x", "5");

can be used.

From seeing your screenshots, it's clear that jQuery was not loaded properly. Use <script> tag to load jQuery file before end of </body> tag.

Example:

<body>
...
..
<script src="js/jQuery.js"></script>
<script src="js/yourfile.js"></script>
</body>

edited Jun 4, 2015 at 5:46

answered Jun 4, 2015 at 5:35

avk87

11 silver badge4 bronze badges

Collectives™ on Stack Overflow

add data attribute dynamically

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related