Javascript change multiple element style on click

Question

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

enter image description here

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

Ajai · Accepted Answer · 2015-05-29 17:33:40Z

3

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');
})

answered May 29, 2015 at 17:33

Ajai

9019 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript change multiple element style on click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related