单击按钮单击时Javascript边框颜色不变

Question

很抱歉打开一个问题，我相信很多人会认为这个问题非常基本，但我并不知道javascript并且正在学习我的应用程序增长

我有以下

单击单选按钮时，我希望使用<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>'; 的div将边框颜色更改为红色。

我想出了这段代码

{{1}}

显然我做错了什么。任何帮助将不胜感激

以下是抛出的错误。

Answer 1

teams是一个类属性，不是 ID。

将getElementById("teams")更改为getElementsByClassName("teams")

请注意getElementsByClassName("teams")返回匹配元素的数组;所以使用循环来设置每个的值或只使用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";
    }
}

Answer 2

尝试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"
        }
    }

工作demo

Answer 3

在您的代码中teams是一个类名而不是id。

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

要么将其更改为id：

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

或者使用getElementsByClassName("teams")，它会为您提供NodeList

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

除此之外，你可以尝试使用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>

Answer 4

只是一点提示，我会尝试远离使用onclick事件并转向外部JavaScript。

我已经创建了一个你可以尝试的例子。

＆＃13;

＆＃13;

$(':radio').change(function () 
{
    if ($(this).val() == "team1")
    {
        $(".row").css("border-color", "blue");
    }
    else if ($(this).val() == "team2")
    {
        $(".row").css("border-color", "red");
    }
    
});

＆＃13;

div.row {
    border: 2px solid black;
    height: 200px;
    width:200px;
}

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;