When manually inserting a number into the HTML, the counter works fine. However, when pulling data remotely, there seems to be a problem. The remote data is logging correctly in the console and appears properly in the DOM element when the counter code is disabled. The typeof the remote data shows as "number," but using parseInt() results in "NaN." Adding a + before the variable in parseInt() gives "0" as output. I also tried encodeURIComponent(), which returned the correct value without any extra characters.
$(document).ready(() =>{
let count;
const getData = () => {
$.ajax({
url:'https://raw.githubusercontent.com/RAdrianKing/AUbeatweek/master/auburn.json',
dataType: 'json',
type: 'GET',
}).then((response) => {
console.log(response);
count = response.DonorTotal;
console.log(count);
$('.count').append(count)
})
}
getData()
})
And then in another js file loaded right after...
// COUNTER
let start // set on the first step to the timestamp provided
const elements = Array.from(document.getElementsByClassName('count')) // get the elements
console.log(elements);
elements.forEach(el => {
const final = parseInt(el.textContent, 10) // parse out the final number
console.log(final);
const duration = 2000 // duration in ms
const step = ts => {
if (!start) {
start = ts
}
// get the time passed as a fraction of total duration
let progress = (ts - start) / duration
el.textContent = Math.floor(progress * final) // set the text
if (progress < 1) {
// if we're not 100% complete, request another animation frame
requestAnimationFrame(step)
}
}
// start the animation
requestAnimationFrame(step)
})