Odometer JS similar class name

Question

I would like to create a my odometer here uses the same class and declare only once. I tried document.querySelectorAll('.odometer') but It does not work. Please see reference below

What I tried so far: other link (http://jsfiddle.net/9hawxpne/)

const elements = document.querySelectorAll('.odometer');
Array.from(elements).forEach((element, index) => {
  ticketOdometer = new Odometer({
    el: elements[index] ,
    minIntegerLen: 2,
    format: 'd',
    theme: 'digital',
    value: 40
  });
});




var odometer_bool_counter = true;

function setRandomOdometerValue() {
  if (odometer_bool_counter) {
    $('.odometer').html(Math.floor(Math.random() * (40 - 1 + 1) + 1)); // change value
  }
}
setInterval(function() {
  setRandomOdometerValue();
}, 2500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Odometr includes -->

<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-digital.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>



<div id="odometer" class="odometer" style="font-size:72pt;">
  40
</div>
<div id="" class="odometer" style="font-size:72pt;">
  40
</div>
<div id="" class="odometer" style="font-size:72pt;">
  40
</div>
<div id="" class="odometer" style="font-size:72pt;">
  40
</div>
<div id="" class="odometer" style="font-size:72pt;">
  40
</div>

Answer 1

In the setRandomOdometerValue function, you want to change the inner html of each .odometer.

As you are already using jQuery, you can do this with jQuery each.

$('.odometer').each(function() {
  $(this).html(Math.floor(Math.random() * (40 - 1 + 1) + 1));
})

But you can also just use javascript:

elements.forEach((element) => {
  element.innerHTML = Math.floor(Math.random() * (40 - 1 + 1) + 1)
});

const elements = document.querySelectorAll('.odometer');

Array.from(elements).forEach((element, index) => {
  ticketOdometer = new Odometer({
    el: elements[index] ,
    minIntegerLen: 2,
    format: 'd',
    theme: 'digital',
    value: 40
  });
});

function setRandomOdometerValue() {
  $('.odometer').each(function() {
    $(this).html(Math.floor(Math.random() * (40 - 1 + 1) + 1)); // change value
  })
}

setInterval(() => {
  setRandomOdometerValue();
}, 2500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Odometr includes -->
<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-digital.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>

<div class="odometer">40</div>
<div class="odometer">40</div>
<div class="odometer">40</div>
<div class="odometer">40</div>
<div class="odometer">40</div>