Errors using multiple instances of Odometer JS?

Question

Having a bit of trouble getting Odometer JS to work on multiple elements. I am creating 5 elements via Nunjucks macros and am passing a data attribute to Odometer to be processed.

This is what it the Nunjucks macro currently looks like:

{% for item in items | sort(attribute = item.sum) | limit(5) %}

<div class="odometer" data-counterAmount="{{ item.counterAmount }}"></div>
        
{%- endfor -%}

The current jQuery code:

$(".odometer").each(function(){

    let el = $(this);
    let counterAmount = el.attr("data-counterAmount");

    od = new Odometer({
        el: el,
        value: counterAmount,
        // format: 'd',
        animation: 'ease',
        duration: 400,
    });

});

However, I am getting this error:

Uncaught TypeError: this.el.appendChild is not a function
    at a.renderInside (odometer.min.js:2)
    at new a (odometer.min.js:2)
    at HTMLDocument.eval (mine.js:11)
    at e (jquery-3.6.0.min.js:2)
    at t (jquery-3.6.0.min.js:2)

Any clue on how to resolve this? Any tips are very much appreciated, thanks

Answer 1

You need to use el: el[0]

Because .appendChild is for javascript and not jquery

Demo

$(".odometer").each(function() {

  let el = $(this);
  let counterAmount = el.attr("data-counterAmount");

  od = new Odometer({
    el: el[0],
    value: counterAmount,
    // format: 'd',
    animation: 'ease',
    duration: 400,
  });

});

.odometer {
  font-size: 100px;
}

<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-car.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>
<div class="odometer" data-counterAmount="123"></div>
<div class="odometer" data-counterAmount="456"></div>