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