i creating simple looking progress bar. have 4 sections, , above each section progress bar. example, in section 2, progress bar have step 1 highlighted in green. section 3, progress bar have step 1 , 2 highlighted in green etc.
class step-incomplete same step-complete background difference.
at moment, have few problems. can't find out how reference headers in each div. whatever nothing or [object htmlheadingelement]. loop fine, can't find way change class name specific header, in specific div.
code below:
<html> <head> <style type="text/css"> .step-complete { display: inline; border-style: hidden; background: green; } .step-incomplete { display: inline; border-style: hidden; background: none; } </style> <script type="text/javascript"> var numofsections = 4; function changecolour() { (i = 1; <= numofsections; i++) { if (i != 1) { alert(i); var progress = document.getelementbyid('progress-' + i).id; alert(progress); (j = - 1; j >= 1; j--) { alert(j); var header = document.getelementsbyname("step-" + j); alert(progress.header.classname); } } } } window.onload = function() { changecolour(); }; </script> </head> <body> <button id="push" onclick="changecolour()">click me</button> <div id="progress-1"> <h1 name="step-1" class="step-incomplete">step1</h1> <h1 name="step-2" class="step-incomplete">step2</h1> <h1 name="step-3" class="step-incomplete">step3</h1> <h1 name="step-4" class="step-incomplete">step4</h1> </div> <h1 id="header1">header1</h1> <p>.................. </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </p> <div id="progress-2"> <h1 name="step-1" class="step-incomplete">step1</h1> <h1 name="step-2" class="step-incomplete">step2</h1> <h1 name="step-3" class="step-incomplete">step3</h1> <h1 name="step-4" class="step-incomplete">step4</h1> </div> <h1 id="header2">header2</h1> <p>.................. </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </p> <div id="progress-3"> <h1 name="step-1" class="step-incomplete">step1</h1> <h1 name="step-2" class="step-incomplete">step2</h1> <h1 name="step-3" class="step-incomplete">step3</h1> <h1 name="step-4" class="step-incomplete">step4</h1> </div> <h1 id="header3">header3</h1> <p>.................. </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </p> <div id="progress-4"> <h1 name="step-1" class="step-incomplete">step1</h1> <h1 name="step-2" class="step-incomplete">step2</h1> <h1 name="step-3" class="step-incomplete">step3</h1> <h1 name="step-4" class="step-incomplete">step4</h1> </div> <h1 id="header4">header4</h1> <p>.................. </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </p> </body> </html>the end goal shown in picture:
to me, think you're there! i'm sure though, using getelementsbyname(), have provide index, similar getelementsbytagname() or getelementsbyclass(), while have -
var header = document.getelementsbyname("step-" + j);
i think needs be
var header = document.getelementsbyname("step-" + j)[0];
with index added @ end [0].
Comments
Post a Comment