Modify <span/> 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>

you could use querySelector to select the ones begining with rnum - something like querySelector('class^=rnum-') — Pete
– Pete, Commented Jan 20, 2017 at 14:52
@Pete querySelector() only returns the first matched element. querySelectorAll() — Andreas
– Andreas, Commented Jan 20, 2017 at 14:54

bini · Accepted Answer · 2017-01-20 17:59:12Z

2

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

edited Jan 20, 2017 at 17:59

answered Jan 20, 2017 at 14:55

bini

1541 silver badge5 bronze badges

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

5 Comments

WillKre Over a year ago

Thanks for the help man,I'm getting there. It seems to be showing the first number then not updating, do you know why? codepen.io/apswak/pen/BpWmYV?editors=0001

bini Over a year ago

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 Over a year ago

Can use some optimizing, but you get the idea: codepen.io/anon/pen/rjyqMd?editors=1111

bini Over a year ago

I've made an easier to understand approach: codepen.io/anon/pen/rjyqMd?editors=1111

WillKre Over a year ago

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

Collectives™ on Stack Overflow

Modify <span/> text depending on class names JAVASCRIPT - NO jQUERY

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related