Hi,
I’m building a website in Wix Studio and I’m new to coding. Can any tell me how to close out/end the following code? I keep getting a “parsing error: unexpected token” when I add a } at the end of the code. Any help would be so greatly appreciated!
Here is the code:
let startNum = 0;
let endNum = 146;
let startNumm = 0;
let endNumm = 80;
let startNummm = 0;
let endNummm = 28;
const duration = 20; // 1000 milliseconds
$w.onReady(function () {
$w('#146text').onViewportEnter(() => {
setInterval(() => {
countUp();
}, duration);
});
function countUp() {
if (startNum <= endNum) {
$w('#146text').text = startNum.toLocaleString().toString();
startNum++;
if (startNumm <= endNumm) {
$w('#80text').text = startNumm.toLocaleString().toString();
startNumm++;
if (startNummm <= endNummm) {
$w('#28text').text = startNummm.toLocaleString().toString();
startNummm++;
I’m trying to achieve a “counting up” function for a set of numbers so that when a user scrolls to that section of the site, the number starts at “0” and counts up to their end number. Here is the site for reference (it’s the section with the bug numbers 146%, 80%, 28%): https://phantomeye.wixstudio.io/chatrhub
Thank you!
I assume that you want to create an ANIMATED-COUNTER, which counts up until a specific setted -->NUMBER<–, for each of your Text-fields …on your page…
- First of all what i would immediately reccomend to do is to always use a good and selfexplaining declaration for everything inside your code, what i am talking about?
$w(‘#146text’) —> #146text -----> totaly → NOT GOOD !!!
a) text146 → already better
b) txt146 ----> even better
c) txtSalesIncrease → almost there!
d) txtSales or txtSE ----> PERFECT SOLUTION → PERFECT DECLARATION.
Do the same for all other elements inside your code!!! → WHY ???
Because…
- This way you will work in a much more systematic way.
- This way you will work faster saving a lot of coding time.
- This way you will also save other (PRO-CODERS) a lot of time and headaches, because everyone will be able to read your code easely and fast → productive working.
- …and there are even much more reasons why you should pay attention onto this checkpoint, but this is not the issue i want to solve or explain now… back to the root-issue.
But wait!!!
And a next lesson!
let startNum = 0;
let endNum = 146;
let startNumm = 0;
let endNumm = 80;
let startNummm = 0;
let endNummm = 28;
What the h.e.l.l. → let endNummm <----- NOOOOOOOOO!!! Never do that in coding!!!
The right way would be to generate it like…
//---[ User-Interface ]--------------------
let startNum = [];
startNum[0] = 0;
startNum[1] = 0;
startNum[2] = 0;
let endNum = [];
endNum[0] = 146;
endNum[1] = 80;
endNum[2] = 28;
const countSpeed = 50; // in milliseconds
//---[ User-Interface ]--------------------
YEAH !!! —> Much better!
Ok, let’s continue…with the code…
//---[ CODE ]--------------------
$w.onReady(()=> {console.log('Page ready...');
$w(‘#txtSales’).onViewportEnter(()=> {console.log('onViePortEnter running...')
setInterval(()=>{start_Counter();}, countSpeed);
});
});
Till here everything should be clear.
Reaching a specific point on ViewPortEnter (entering a specific position on your website [scrolling] → will start/trigger an event) and this will start the counter-function.
And here our counter-function…something like this…
function start_Counter() {console.log('COUNTER running...');
let timer = setInterval(()=> {
if (startNum[0] <= endNum[0]) {startNum[0] = startNum[0]+1
$w(‘#txtSales’).text = (startNum[0]).toString
}
else {clearInterval(timer); startNum[0]=0;}
}, countSpeed);
}
To give you even one more idea would be… what about to generate a SPEED-INCREASING-COUNTER?
- Starting slow, but rising up the counter-speed → exponantial ???
- Starting slow, but rising up the counting speed linear???
Think about it!
Here another example, created in 5min…(do not expect to much, just an example…)
…just another example from another post…
const createTimer = (element, interval) => (startTime, endTime) => {
let count = startTime
const counter = setInterval(() => {
element.text = count.toLocaleString() // update text
count++
count === endTime && clearInterval(counter)
}, interval)
return counter
}
$w.onReady(() => {
const timer1 = createTimer($w('#text57'), 1) // element and interval
const timer2 = createTimer($w('#text59'), 1) // element and interval
const timer3 = createTimer($w('#text58'), 100) // element and interval
$w('#text57').onViewportEnter(() => timer1(9456, 10001)) // startTime and endTime
$w('#text58').onViewportEnter(() => timer2(198650, 200001)) // startTime and endTime
$w('#text59').onViewportEnter(() => timer3(1, 101)) // startTime and endTime
})
