Javascript change multiple element style on click

Question

Consider the following images, which lets a user guess who will win a certain sports match

Im trying to do the following:

• Change the style (text color) of selected teams to black, inorder for user to see who he selected before pressing submit

  while($fixtures> $upcoming){
   //radio buttons to select team
  <input type="radio" id="'.$x.'"onclick="teams()" name="picks['.$x.']" value="'.$row['team1'].'"/>
   <input type="radio" onclick="teams()" name="picks['.$x.']" value="'.$row['team2'].'"/>
  <input type="radio" onclick="teams()" name="picks['.$x.']" value="draw" />
      echo'<b>BY</b>';
          echo'<select name="score[]" id="score[]">';
              echo'<option value="0">0</option>';
              echo'<option value="1">1</option>';
              echo'<option value="2">2</option>';
              echo'<option value="3">3</option>';
              echo'<option value="4">4</option>';
              echo'<option value="5">5</option>';
  
              echo'</select>';    
              echo'<b>POINTS</b>';
     echo'
  </div>
  
  // where team names are displayed, this needs to change style onclick
  echo'<div id="dispPicks">';
      foreach($dispTeam1 as $key => $team1){
          echo '<p class="team1">';
          echo $team1;
          echo'</p>';
          echo ' VS ' ;
          echo'<p class="team2">';
          echo $dispTeam2[$key];
          echo'</p>';
      }
  echo'</div>';
  

  I tried to write the following javascript

    var elements = document.getElementById("makePicks").elements;
      var len = elements.length;
      var team=[]
      for(x=0; x<len; x++){
        if(elements[x].type == "radio" && elements[x].checked== true)
        {
          team[x] = t1[x].value; //the value of team[x] is now selected team 
        }
  

My problem

team[x] now has the selected team however im now stuck...and cant figure out how to change the team names style...from here.

Things To Consider:

• The teams/fixtures are dynamically pulled from a database and generated in a php loop
  • every round will have a different number of fixtures

Answer 1

So you should be doing this. Add the same class for all clickable teams, say class="team". In your css add this

.selected{
   background-color:#fff;
}

Now using Jquery like this,

$('.team').click(function(){
   $(this).toggleClass('selected');
})