I don’t know that library at all, so I can’t give you any pointers other than “read the docs” and “dig through the code samples,” it’s what I would need to do.
Maybe I missed it but I also don’t see what elements you’re trying to affect; there’s a particular arrangement of elements in the cloneable that makes up the odo UI. Maybe I just didn’t see it, or possibly it’s on a different page.
As always, publish your site and look for errors in the console, they may help you find obvious scripting errors.
If you need me to help you with that work, I do have a micro-consulting arrangement, but I’m away for the next 3 weeks on a project.
I’m trying to affect this number in the hero section. But for some reason, it just skyrockets, as you see in the image
(Here’s the live site to see it)
This is the script I used is below,
<!-- The main script for all odometers -->
<script src="https://github.hubspot.com/odometer/odometer.js"></script>
<!-- ODOMETER 5 -->
<script>
// Run function for each element with the class .odometer._5
$('.odometer._5').each(function () {
// Desired start value of the odometer
var startValue = 15000;
// Options for the odometer
var odometer = new Odometer({
// el tells the odometer script which element should be the odometer
el: this,
// value tells the odometer script what the start value should be
value: startValue,
// Change how digit groups are formatted, and how many digits
// are shown after the decimal point
format: '(,ddd)',
// Change how long the javascript expects the CSS animation to take
duration: 2000,
});
// Init odometer with the defined start value
odometer.render(startValue);
// Set an interval that repeats everything in it every 3 seconds
setInterval(function () {
// We want to randomly generate a number in a range and add
// them to the current value
// 1. Define your minimum value
const min = 1;
// 2. Define your maximum value
const max = 60;
// Safe a random number between your min and max values and round
// them to total numbers without decimals
const randomNumber = Math.floor(Math.random() * (max - min)) + min;
// Optional: Show generated numbers each interval in dev console
// console.log(randomNumber);
// Update the odometer and increase by generated number "randomNumber"
odometer.update(startValue += randomNumber);
}, 3000);
});
</script>
I got the class named odometer, with a combo class of 5. But still, it just doesn’t work
And just put them there in place of the previous script, like so,
<!-- The main script for all odometers -->
<script src="https://cdn.jsdelivr.net/npm/odometer.js@1.0.0/odometer.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/odometer.js@1.0.0/odometer.min.css">
And I also triggered it to just affect the class of .odometer (no combo class of 5)