danman97 Posted September 4, 2011 Share Posted September 4, 2011 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 Link to comment Share on other sites More sharing options...
Ingolme Posted September 4, 2011 Share Posted September 4, 2011 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. Link to comment Share on other sites More sharing options...
danman97 Posted September 4, 2011 Author Share Posted September 4, 2011 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> Link to comment Share on other sites More sharing options...
Ingolme Posted September 4, 2011 Share Posted September 4, 2011 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(); Link to comment Share on other sites More sharing options...
danman97 Posted September 4, 2011 Author Share Posted September 4, 2011 Thank You. I think I understand now. I shall try tomorrow morning!Thanks again Link to comment Share on other sites More sharing options...
niche Posted September 5, 2011 Share Posted September 5, 2011 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 Link to comment Share on other sites More sharing options...
danman97 Posted September 5, 2011 Author Share Posted September 5, 2011 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> Link to comment Share on other sites More sharing options...
Ingolme Posted September 5, 2011 Share Posted September 5, 2011 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? Link to comment Share on other sites More sharing options...
danman97 Posted September 5, 2011 Author Share Posted September 5, 2011 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... Link to comment Share on other sites More sharing options...
JamesB Posted September 5, 2011 Share Posted September 5, 2011 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();} Link to comment Share on other sites More sharing options...
danman97 Posted September 5, 2011 Author Share Posted September 5, 2011 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.