Currently, im adding 1 to the index on click, to simulate a user controlled iteration of the array. I have a conditional statement where if i > length, i = 0; Yet im still getting undefined after reaching the end of the array.
const marqueeMonthlies = () => {
intervalId = setInterval(() => {
insertMarquee.empty('');
// i %= marqueeMonthlyPlates.length
insertMarquee.append(
`<div class="container" id="generatedMonthlyPlates">
<input type="text" width="100px" name="monthlyLicensePlate" id="${marqueeMonthlyPlates[i]}" class="licensePlate" placeholder="AB12345" value="${marqueeMonthlyPlates[i]}"/>
</div>`
)
// i++;
}, 5000);
}
const getNextMonthly = () => {
if ( i < marqueeMonthlyPlates.length) {
i = i+1
return marqueeMonthlyPlates[i]
} else
if (i > marqueeMonthlyPlates.length){
i = 0;
return marqueeMonthlyPlates[i];
} else
if (marqueeMonthlyPlates.length === undefined ){
i = 0;
return marqueeMonthlyPlates[i];
}
}
I tried to catch for when undefined present, to set the index back to 0, but it only corrects itself when 1 is added to i again on another click. What am I doing wrong here?
The answer was to change my greater than statement, as the goal was to bring i back to 0 when it reached the end.
if (i > marqueeMonthlyPlates.length){
i = 0;
return marqueeMonthlyPlates[i];
to
if (i >= marqueeMonthlyPlates.length){
i = 0;
return marqueeMonthlyPlates[i];