CODEWITHSUNDEEP
javascripthtmlcss
Tim C
Tim C

Reputation: 5714

Javascript border colour not changing on radio button click

Im sorry to open a question, which I am sure many will consider very basic but I don't really know javascript and am learning as my application grows

I have the following

enter image description here

When radio button is clicked I would like the div with class="teams" to change border colour to red.

I came up with this code

<label><input type="radio" onclick="return border()" name="picks['.$x.']" id="one" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
<label><input type="radio" onclick=" return border()" name="picks['.$x.']" id="two" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />
<label><input type="radio" onclick="return border()" name="picks['.$x.']" id="three" value="draw"><span>Draw</span></label><br />
</center>';

function border(){
    if(document.getElementById("one").checked){ 
        document.getElementById("teams").style.borderColor="red"
    }

    else if( document.getElementById("two").checked){
        document.getElementById("teams").style.borderColor="red"
    }
}

echo'<div class="teams">';
echo'<img src="images/teams/'.$src1.'.png" id="t1" />'; 
echo'<img src="images/teams/'.$src2.'.png" id="t2" />'; 
echo'</div>';

Clearly I am doing something wrong. Any help will be greatly appreciated

Following is the error thrown.

enter image description here

Upvotes: 0

Views: 1377

Answers (4)

YaBCK
YaBCK

Reputation: 3029

Just a little tip I would try and get away from using the onclick events and move towards external javascript.

I've created an example of something you could try.

$(':radio').change(function () 
{
    if ($(this).val() == "team1")
    {
        $(".row").css("border-color", "blue");
    }
    else if ($(this).val() == "team2")
    {
        $(".row").css("border-color", "red");
    }
    
});
div.row {
    border: 2px solid black;
    height: 200px;
    width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">

</div>

<label for="team1">1</label>
<input id="team1" type="radio" name="team1" value="team1">
    
<label for="team2">2</label>
<input id="team2" type="radio" name="team2" value="team2">

Upvotes: 0

user2575725
user2575725

Reputation:

In your code teams is a class name and not id.

echo'<div class="teams">';

Either you change it to id:

echo'<div id="teams">';

Or use getElementsByClassName("teams"), it will give you NodeList

document.getElementsByClassName("teams")[0].style.borderColor="red";

Apart from this, you could possibly try this solution just using css pseudo:

input[type=radio].check {
  display: none;
}
input[type=radio].check + label.check {
  border: 1px solid grey;
  padding: 5px 7px;
  cursor: pointer;
  width: 150px;
  display: block;
  text-align: center;
  margin-bottom: 2px;
}
input[type=radio].check:checked + label.check {
  background: red;
}
<input type='radio' name='team' value='Team 1' class='check' id='check1' />
<label for='check1' class='check'>Team 1</label>
<input type='radio' name='team' value='Team2' class='check' id='check2' />
<label for='check2' class='check'>Team 2</label>
<input type='radio' name='team' value='Draw' class='check' id='check3' />
<label for='check3' class='check'>Draw</label>

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20626

teams is a class attribute and not ID.

Change getElementById("teams") to getElementsByClassName("teams")

Note that getElementsByClassName("teams") returns an array of matched elements; so use a loop to set the value of each or just use getElementsByClassName("teams")[0].style.borderColor

function border() {
    var el = document.getElementsByClassName("teams")[0];
    if (document.getElementById("one").checked || document.getElementById("two").checked) { 
        el.style.borderColor = "red";
        el.style.borderStyle = "solid";
    }
}

Upvotes: 1

Radonirina Maminiaina
Radonirina Maminiaina

Reputation: 7004

Try onclick="border(this.id)"

 <labe><input type="radio" onclick="border(this.id)" name="picks['.$x.']" id="one" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
 <label><input type="radio" onclick=" border(this.id)" name="picks['.$x.']" id="two" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />


function border(id){
    if(document.getElementById(id).checked){ 
        document.getElementsByClassName('teams')[0].style.borderColor="red"
        }
    }

Working demo

Upvotes: 1

Related Questions