if data-progress="50" change data-progress-text

Question

I have a loader on my page and its html looks like this:

<div class="pace-progress" data-progress-text="Loading 50/100" data-progress="50" style="transform: translate3d(100%, 0px, 0px);">

I want to write a JS that can change the data-progress-text when the data-progress is 50 from "Loading 50 / 100" to "Almost there!".

I do not know where to start and any help would be greatly appreciated.

if ( $('.pace-progress').attr('data-progress-text') == '50' ) {
(".pace-progress").attr("data-progress-text") == "Almost there!"}

Answer 1

== is for comparing a value

= is for assigning a value

That said, since you are using the jQuery attr method you cannot assign a value like that. The method itself accepts a second argument to determine if it is a getter or a setter.

The jQuery docs are pretty complete and you should definitely make use of them before asking questions

Answer 2

Use setInterval to check periodically for the value and update the corresponding attribute:

setInterval(fucntion(){
   if ( $('.pace-progress').attr('data-progress') == '50' )
      $(".pace-progress").attr("data-progress-text", "Almost there!");
}, 500);