How to update data attribute using JQuery?

Question

I am trying to use JQuery to update a data attribute after clicking on a button. Please take a look at what I have tried below. When I click on the div with class previous-wrapper, the whole block is well updated, and the data-nb-attribute get the correct value. But, when I click on this div for the second time, data-nb-attribute gets the value NaN..
Is there another way to dynamically update and retrieve the value of this attribute?

$(function(){ 
  $(document).on('click','.previous-wrapper',function(){ 
        var get_nb = $(this).find('.previous');
        get_nb = get_nb.data("nb");
        get_nb = parseInt(get_nb)
   
        //Dom to update
        arr_left = $('<i/>', {
                            className: 'fa-solid fa-arrow-left'
                        });

        previous = $('<div/>', {
                        className: 'previous',
                        'data-nb': get_nb-5,
                        html: "Previous"
                    });
   
   //Question 2. How to append previous to arrow_left 

        $(".previous-wrapper").html(previous);
    });
 });

.previous-wrapper{
  cursor: pointer;
  background:red; 
  width:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="previous-wrapper">
  <i class="fa-solid fa-arrow-left"></i>
  <span class="previous" data-nb="100">Previous</span>
</div>

I would also like to know how to add multiple DOM created by JQuery.

hello are u saying u want to change the attribute value of className: 'previous' to className: 'arrow_left' when clicked ? — Timileyin Oluwayomi
– Timileyin Oluwayomi, Commented Aug 10, 2022 at 13:37
Hello, I want to update the value of data-nb="100", then retrieve and update the new value on next click. — Kyv
– Kyv, Commented Aug 10, 2022 at 13:41
ok the issue right now is that whenever you click the div the second time, it does update the data-nb — Timileyin Oluwayomi
– Timileyin Oluwayomi, Commented Aug 10, 2022 at 14:27

Daniel Beck · Accepted Answer · 2022-08-10 21:37:50Z

3

You're overwriting the HTML with an invalid attribute of "classname" instead of "class", which means on the second interation $('.previous') won't match anything.

Corrected version of your code:

$(document).on('click', '.previous-wrapper', function() {
  var get_nb = $(this).find('.previous');
  get_nb = get_nb.data("nb");
  get_nb = parseInt(get_nb)

  //Dom to update
  arr_left = $('<i/>', {
    class: 'fa-solid fa-arrow-left'
  });

  previous = $('<div/>', {
    class: 'previous',
    'data-nb': get_nb - 5,
    html: "Previous"
  });

  // including both elements at once:
  $(".previous-wrapper").html([arr_left, previous]);

  console.log($('.previous-wrapper').html())
});

.previous-wrapper {
  cursor: pointer;
  background: red;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="previous-wrapper">
  <i class="fa-solid fa-arrow-left"></i>
  <span class="previous" data-nb="100">Previous</span>
</div>

It would be much, much simpler, however, to simply update the one attribute you want to update, instead of rewriting all the HTML every click:

$(document).on('click', '.previous-wrapper', function() {
  let el = $(this).find('.previous')

  // update the data attribute using .attr() instead of .data() because jQuery handles .data internally; it's not reflected in the DOM
  el.attr('data-nb', Number(el.attr('data-nb')) - 5);

  console.log($('.previous-wrapper').html())
});

.previous-wrapper {
  cursor: pointer;
  background: red;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="previous-wrapper">
  <i class="fa-solid fa-arrow-left"></i>
  <span class="previous" data-nb="100">Previous</span>
</div>

edited Aug 10, 2022 at 21:37

answered Aug 10, 2022 at 14:06

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

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

2 Comments

Kyv Over a year ago

Thank you @DanielBeck Any idea on how to make the left arrow <i class="fa-solid fa-arrow-left"></i> stay where it is after the block has been updated ?

Daniel Beck Over a year ago

@Kyv I updated my answer above. (For future reference though it's generally best to ask one question at a time; that makes it more likely to be useful to future users)

Collectives™ on Stack Overflow

How to update data attribute using JQuery?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related