I don't understand the code (Progressbar) (Javascript)

Hello everybody,

I visited a website which had a progress bar running.
I thought it looked pretty cool.
So I did some research on how to code such a progressbar.

I found a link on the w3 website.
This is the source : w3schools (dotcom) /howto/howto_js_progressbar.asp

There are three parts.
HTML
CSS
Javascript

I have a question about the Javascript part.

Question 1:
“var i = 0” (why?)

Question 2:
function move() has:
“i = 1” (why?)
var width = 1 (why?)

Question 3:
function frame () has:
“i = 0” (why?)

Question 4:
“elem.style.width = width + “%””
(what does this “%” mean?)

Question 5:
Could someone break this javascript down for me?

I’m terribly sorry.
But I just don’t get it.

Sidenote: It’s 0.00 where I live.
After posting this, I’m going to get some sleep.
I will reply within some couple of hours (if someone answered)

Thanks in advance.
(Stay safe (Corona))

This is not a very good example of a progress bar. There is an actual <progress> element that should be used. You would use that by setting the value of the element incrementally as the progress of whatever you are monitoring proceeds. So the example you found is not really showing you how to use a progress bar. Look at this for the progress element:

Use JS to change the value on the element. Exactly how you do that is going to depend on what progress you are monitoring. Or if you just want it for show and it isn’t really monitoring anything then you can use setInterval to update it every so often as they are doing in the example you posted.

As far as answering your questions about the code, this is a fairly simple function, I think you should try to work out some of these answers on your own first (that’s the best way to learn). At least try and get a general idea of what is going on and then if you can’t work out a specific problem you can ask for help on that problem. But that’s just me, maybe someone else here will answer all of these for you.

1 Like
Question 1:
“var i = 0” (why?)

Question 2:
function move() has:
“i = 1” (why?)

That is an odd use of “i”. Usually that is used as an indexing variable. It almost lokks like they’re using it as a boolean flag. I might have called it “isRunning”. It’s used to tell if it’s already running. Notice that if you reclick the “Click Me” button before it is done, it does not restart. Change the line to:

// ...
function move() {
  if (true) {
// ...

And now you can restart it before it ends. That is bad writing. It should be a boolean. And I don’t like the global variable.`

Question 4:
“elem.style.width = width + “%””
(what does this “%” mean?)

It means percentage. It’s saying how much percentage to fill up. It starts at 10 and goes to 100.

Question 5:
Could someone break this javascript down for me?

You might want to be more specific than that. This is some pretty basic JS going on here, the kind that FCC teaches. Is there something specific that you don’t understand?

1 Like

This was the answer I was looking for!
Thank you!

No more questions :slight_smile: Thank you!

Thank you for replying!

And thanks for the progress-bar link.
That’s a good suggestion!

You’re right about the “finding out on my own first!”
I understand the function and what it does.
I just had some questions with the way they came to this ‘solution’.

Thanks to you and kevinSmith, I’m good!