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!"}

What code have you tried? Generally people like to help, but this appears you asking us to just do you work without you *doing anything yourself to get it to work*. — Erik Philips, May 26 '16 at 18:10
Right, so... when data-progress changes and becomes "50", update the other attribute. it really is that simple. — Kevin B, May 26 '16 at 18:11
What JavaScript, or jQuery, do you have that updates the `data-progress` attribute? Does it trigger an event of any kind that can be responded to? — David Thomas, May 26 '16 at 18:19
There's a JS called pace.js that triggers that data-progress @DavidThomas. (https://github.com/HubSpot/pace/blob/master/pace.js) — Federico, May 26 '16 at 18:20
I tried @CyberneticTwerkGuruOrc but it won't work without a huge external JS — Federico, May 26 '16 at 19:13

score 0 · Answer 1 · answered May 26 '16 at 18:46

== 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

score 0 · Answer 2 · answered May 26 '16 at 18:48

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);

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

2 Answers2