Modify text depending on class names JAVASCRIPT - NO jQUERY

Question

What I'm trying to do is write a function that will iterate over all different html elements which have a class name beginning with rnum- followed by a number. A complete example of a span would be <span class="rnum-293"></span>.

I then want to implement the function that I have written below and have it do the increasing effect up to each of their given numbers(specified in the class name).

Does anyone have an idea how I can achieve this? Thanks!

var count = 0;
var target = 126;
var increment = target / 198;
var elements = document.getElementsByClassName('rnum');

function calc() {
  if(count < target) {
    count += increment;
  }
  for(var i = 0; i < elements.length; i++) {
   elements[i].innerHTML = Math.round(count);
  }
}

setInterval(calc, 10)

@import url('https://fonts.googleapis.com/css?family=Bangers');

body {
  font-family: 'Bangers';
  display: flex;
  align-items: center;
  justify-content: center;
}

.rnum {
  font-size: 55px;
  margin: 50px;
}

<span class="rnum"></span>
<span class="rnum"></span>
<span class="rnum"></span>

http://stackoverflow.com/questions/6195373/regular-expression-to-get-class-name-with-specific-substring — Banzay, Jan 20 '17 at 14:50
you could use [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) to select the ones begining with `rnum` - something like `querySelector('class^=rnum-')` — Pete, Jan 20 '17 at 14:52
@Pete `querySelector()` only returns the first matched element. [`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) — Andreas, Jan 20 '17 at 14:54

bini · Accepted Answer · 2017-01-20T17:59:12.280

To select the elements, use:

var elements = document.querySelectorAll('[class^="rnum-"]');

Or, if only span elements, use:

var elements = document.querySelectorAll('span[class^="rnum-"]');

I am unsure about the second part of your question. For all I see, the only issue was selecting the elements.

For the second part:

JavaScript:

    var elements = document.querySelectorAll('span[class^="rnum-"]');

function calc() {
    var el = null;
    var val = 0;
    var currentValue = 0;
    var incrementFactor = 198;
    var increment = 0;
    var maxValue = 0;

    for (var i = 0, len = elements.length; i < len; i++) {
        el = elements[i];
        maxValue = Number(el.getAttribute('data-max-val'));
        currentValue = Number(el.getAttribute('data-current-val'));
        increment = maxValue / incrementFactor;

        if ((currentValue + increment) > maxValue)
            continue;

        val = currentValue + increment;
        el.innerHTML = Math.round(val);
        el.setAttribute('data-current-val', Math.round(val));
    }
}

setInterval(calc, 10)

HTML:

<span class="rnum-198000" data-current-val="0" data-max-val="198000">0</span>
<span class="rnum-299000" data-current-val="0" data-max-val="299000">0</span>
<span class="rnum-399000" data-current-val="0" data-max-val="399000">0</span>
<span class="rnum-499000" data-current-val="0" data-max-val="499000">0</span>

Pen: http://codepen.io/anon/pen/rjyqMd?editors=1111

Thanks for the help man,I'm getting there. It seems to be showing the first number then not updating, do you know why? http://codepen.io/apswak/pen/BpWmYV?editors=0001 — WillKre, Jan 20 '17 at 16:18
Because it's always getting the value from the class and that value is not being updated. Personally, I'd use a data- attribute to store the last value. — bini, Jan 20 '17 at 16:32
Can use some optimizing, but you get the idea: http://codepen.io/anon/pen/rjyqMd?editors=1111 — bini, Jan 20 '17 at 16:41
I've made an easier to understand approach: http://codepen.io/anon/pen/rjyqMd?editors=1111 — bini, Jan 20 '17 at 17:42
Great! Thanks a lot I really appreciate it. I've accepted your answer so it's probably a good idea to update your false js code with the new. Thanks again — WillKre, Jan 20 '17 at 17:55

Modify text depending on class names JAVASCRIPT - NO jQUERY

1 Answers1