Redirect Progress Bar

[danman97]

HiI have been trying to add a progress bar to a page on my website. I would like it to add progress over a period of time and at 100%, redirect the page. However, I just cant get it to raise the value!Here is my code:

<script>function addprogress() {	var pb = document.getElementById("progBar");	setInterval('pb.value+=10;',1000)};window.onload = "addprogress()";setTimeout('window.location = "http://www.meljones.info/schools-nurseries.html"', 10000);</script><b><big>THIS PAGE HAS NOW MOVED. <script type="text/javascript">document.write("YOU ARE ABOUT TO BE REDIRECTED.");</script><noscript></b>*Javascript is disabled - Unable to redirect*<b>.</noscript> NEXT TIME PLEASE VISIT [Link type="section" id="527732"]SCHOOLS AND NURSERIES[/link]. <progress id="progBar" max="100" value=""></progress>Thanks.</b><small><details><summary>Not redirecting?</summary>It may take about 10 seconds to redirect. [Link type="section" id="527732"]Click here to visit the new page.[/link]</details></small>

The Page

[Ingolme]

You're defining pb as a local variable, but when passing a string to setInterval the string is executed in the global scope and pb isn't found.Rather than sending a string to setInterval() use an anonymous function.

[danman97]

ThanksI dont know wether this is what you mean (I'm new to JavaScript!):

<script>var addvalue = function(){pb.value+=10;};function addprogress() {	var pb = document.getElementById("progBar");	setInterval('addvalue()',1000)};window.onload = "addprogress()";setTimeout('window.location = "http://www.meljones.info/schools-nurseries.html"', 10000);</script><!--<script src="http://dl.dropbox.com/u/37184122/meljones.info%20other/Javascript/Redirect_Schools.js" type="text/javascript"></script>--><b><big>THIS PAGE HAS NOW MOVED. <script type="text/javascript">document.write("YOU ARE ABOUT TO BE REDIRECTED.");</script><noscript></b>*Javascript is disabled - Unable to redirect*<b>.</noscript> NEXT TIME PLEASE VISIT [Link type="section" id="527732"]SCHOOLS AND NURSERIES[/link]. <progress id="progBar" max="100" value=""></progress>Thanks.</b><small><details><summary>Not redirecting?</summary>It may take about 10 seconds to redirect. [Link type="section" id="527732"]Click here to visit the new page.[/link]</details></small>

[Ingolme]

You need to learn about scope.Your variable, pb, is created when the function starts running and destroyed when the function ends. It can only be accessed from within the function it was created.

function example() {  var pb = 5;}example();alert( pb ); // Displays "undefined"

If you want to access pb, you need to use it locally:

function example() {  var pb = 5;  alert( pb );  // Displays 5}example();

If you want to manipulate the value of pb in a function, the function has to belong to the function that created your variable:

function example() {  var pb = 5;  setTimeout(addTen, 1000);  function addTen() {	pb += 10;  }}example();

[danman97]

Thank You. I think I understand now. I shall try tomorrow morning!Thanks again

[niche]

Here a recent topic on scope: http://w3schools.invisionzone.com/index.ph...c=38677&hl=Also suggest: http://odetocode.com/Blogs/scott/archive/2...t-closures.aspx

[danman97]

I thought I had it but still no use. Thanks though. I have put the variable in an outer scope.

<script>function addprogress(){	var pb = document.getElementById("progBar");	function addpbvalue()	{		pb.value+=10;	};	setInterval('addpbvalue()',1000);};window.onload = "addprogress()";setTimeout('window.location = "http://www.meljones.info/schools-nurseries.html"', 10000);</script><b><big>THIS PAGE HAS NOW MOVED. <script type="text/javascript">document.write("YOU ARE ABOUT TO BE REDIRECTED.");</script></big></b><noscript>*Javascript is disabled - Unable to redirect*.</noscript> <b><big>NEXT TIME PLEASE VISIT [Link type="section" id="527732"]SCHOOLS AND NURSERIES[/link].</big> <progress id="progBar" max="100" value="0"></progress>Thanks.</b><small><details><summary>Not redirecting?</summary>It may take about 10 seconds to redirect. [Link type="section" id="527732"]Click here to visit the new page.[/link]</details></small>

[Ingolme]

I see you are still passing a string to setInterval(). That's one of the many bad practices that should be avoided. Pass a function reference instead:setInterval('addpbvalue()',1000);setInterval(addpbvalue,1000);Have you checked that the <progress> element is supported by the browser you're testing in?

[danman97]

I see you are still passing a string to setInterval(). That's one of the many bad practices that should be avoided. Pass a function reference instead:setInterval('addpbvalue()',1000);setInterval(addpbvalue,1000);

Is this what you meant?

setInterval(addpbvalue(),1000);

Have you checked that the <progress> element is supported by the browser you're testing in?

Yes, On W3Schools it says it supports 'Chrome', 'Firefox' and 'Opera'. I'm currently testing with Chrome with no luck. However, with Firefox it raises by 10% percent but then stops...

[JamesB]

when passing a function by reference you don't put the () on the end, otherwise the function will be called and the value returned from the function will be sent to setInterval.i think the window.onload property has to take a function value:

window.onload = addprogress;

or

window.onload = function() {	addprogress();}

[danman97]

Thank You, It now works! (at least in Chrome. I havent checked other browsers!) Thank You to Ingolme, niche and JamesB.Working Code:

<script>function addprogress(){	var pb = document.getElementById("progBar");	function addpbvalue()	{		pb.value+=10;	};	setInterval(addpbvalue,1000);};window.onload = addprogress;setTimeout('window.location = "http://www.meljones.info/schools-nurseries.html"', 10000);</script><b><big>THIS PAGE HAS NOW MOVED. <script>document.write("YOU ARE ABOUT TO BE REDIRECTED.");</script></big></b><noscript>*Javascript is disabled - Unable to redirect*.</noscript> <b><big>NEXT TIME PLEASE VISIT [Link type="section" id="527732"]SCHOOLS AND NURSERIES[/link].</big> <progress id="progBar" max="100" value="0"></progress>Thanks.</b><small><details><summary>Not redirecting?</summary>It may take about 10 seconds to redirect. [Link type="section" id="527732"]Click here to visit the new page.[/link]</details></small>

Webpage of Code: meljones.info