javascript - Display array value on click PHP -

lets got right it!

i have done php calculation wan't display on website. tricky part want values displayed, one value each time user clicks once on button. doesn't matter kind of button is, wan't display value on every click. total number of values 8 (fixed length), , right have 4 arrays 2 values in each. every thing done , saved, i'm trying display it, 1 @ time. if easier bunch them 1 array. im trying make sort of display:none vs display onclick thingy, showing first value on each click. grateful tips , tricks! kind of form me? using input instead?

this i've got:

html

<a href="#" class="modern" onclick="showhide('first', 'block'); return false" >give me value</a>  <div id="first"><?php echo $team1[0];?></div> <div class="secound"><?php echo $team1[1];?></div> <div class="third"><?php echo $team2[0];?></div> <div class="fourth"><?php echo $team2[1];?></div> ... 

javascript

function showhide(divid, state){  document.getelementbyid(divid).style.display=state } 

...

there quite number of different ways this. using framework make easier , effortlessly enable support multiple browsers, assuming isn't goal , sticking as have...

i've altered php bit:

<a href="#" id="team-next">give me value</a> <div id="teams">   <div id="team-0"><?= $team[0][0] ?></div>   <div id="team-1"><?= $team[0][1] ?></div>   <div id="team-2"><?= $team[1][0] ?></div>   <div id="team-3"><?= $team[1][1] ?></div>   ... 

notice have changed id prefix team- , index 0 ... n, , teams appear in parent element id teams. i've changed array multidimensional array rather multiple variables numbers in them. construct can created adding array item of array. javascript (this should appear in script tag after above html):

// initial index -1 (nothing displayed) var current = -1;  // how many teams there? var count = document.getelementbyid("teams").children.length;  // handler function shownext() {    // bit of modulus math, when gets   // same value count starts @ 0 again   var next = (current + 1) % count;    // hide previous one, unless first   if(current !== -1)     document.getelementbyid("team-" + current).removeattribute("style");    // show next 1   document.getelementbyid("team-" + next).style.display = "block";    // update current index   current = next; }   // bind event listener document.getelementbyid("team-next").addeventlistener("click", shownext, false); 

here fiddle