我正在学习 JavaScript,并且正在做一些“IQ”测试来练习。我正在使用单选按钮和复选按钮。问题是,当我选择一个单选按钮时,该按钮必须在 onclick 事件中调用函数来显示 DIV,而当我在同一问题中选择其他选项时,它必须隐藏第一个选择中显示的 DIV。
这是函数:
function show(x){
if(x==1){
document.getElementById("teams").style.display ="block";
document.getElementById("activity").style.display ="none";
}else{
if(x==2){
document.getElementById("teams").style.display ="none";
document.getElementById("activity").style.display ="block";
}
}
}
这里是调用该函数的地方:
<div>
¿Do you like Futball?<br>
<input type="radio" name="like" value="Ly" id="yes" onclick="show(1); " checked>
Yes<br>
<input type="radio" name="like" value="Ln" id="no" onclick="show(2); " >
No<br>
</div>
我会根据选择的 Div 来显示此 Div:
<div id="teams" style="display: none;">Here I display 5 checkboxes</div>
<div id="activity" style="display: none;">Here I display 5 Radio buttons</div>
我正在使用这个确切的代码,并且您的 javascript 似乎可以正常工作。如果有错误请留言。
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div>
¿Do you like Futball?<br>
<input type="radio" name="like" value="Ly" id="yes" onclick="show(1);" checked>
Yes<br>
<input type="radio" name="like" value="Ln" id="no" onclick="show(2); " >
No<br>
</div>
<div id="teams">
teams
</div>
<div id="activity" style="display: none;">
activity
</div>
<script>
function show(x){
if(x==1){
document.getElementById("teams").style.display ="block";
document.getElementById("activity").style.display ="none";
}else{
if(x==2){
document.getElementById("teams").style.display ="none";
document.getElementById("activity").style.display ="block";
}
}
}
</script>
</body>
</html>
我在其他函数中得到了一个额外的括号,这就是问题所在。看来我正在编写该函数,分心并忘记正确关闭它。