I'm working on an open-source project and I want the numbers in the first column to scrolling down smoothly. Right now, they're just flipping between values and not presenting the desired effect. I've shared a link to a video that shows the issue I'm experiencing (you'll need to unmute it to hear the audio). Here's a code snippet that illustrates my problem in JavaScript:
```javascript
function colsOne(){
let counter = 9;
for (var i = 0; i < num1.length; i++) { // circular array
circArray = num1List[((counter - i) + num1.length) % num1.length] + " ";
num1[i].innerText = circArray;
}
colsOne();
setInterval(colsOne, 2000);
}
```
Any tips on how to resolve this?
3 Answers
Right! Your counter should change its value each time the setInterval runs to show a different number in the list. It's crucial to adjust the counter inside the interval to achieve that scrolling look effectively.
If you've posted screenshots of your code, be aware that it's usually better to format your code properly in a post instead of sharing images. It makes it easier for others to help you. Still, it sounds like the circular array structure should work; you might just need to ensure that `counter` updates with each cycle for that smooth scrolling effect.
It looks like you're starting off on the right track, but I think the loop is the culprit. When `i=0`, you're pulling value 9 into index 0, then value 8 into index 1, and so on. This is effectively reversing your list instead of creating the desired scrolling effect. You should adjust your logic so that it rotates through your array correctly instead of flipping it around.
I agree! It seems that the `counter` doesn't update, causing it to reset each time. Maybe try incrementing or decrementing the `counter` to modify the index dynamically.
Honestly, I had to comment out the counter at one point too because it was returning odd numbers for me. I just couldn't get the formula right.
Yeah, I noticed that too. Formatting your code is key to getting proper feedback. Just keep iterating on that counter mechanism!