繁体   English   中英

Javascript:检查已选择哪个单选按钮

[英]Javascript: Check which radiobutton has been selected

我已经检查了论坛,找不到任何直接有助于或与我的问题有关的内容,因此请继续。 我正在为学校制作游戏,并且为该玩家显示3个班级,每个班级旁边都有一个单选按钮。 我希望我可以单击一个单选按钮,然后在做出最终决定(关于要选择哪个班级)之后,可以单击底部的按钮,然后继续游戏。

<html>

<head>
    <meta charset="utf-8">
    <title>Class Select</title>
</head>
<link rel="icon" type="image/x-icon" href="icon.ico">

<body background="bg2.jpg">

<p align="center"><font size="20" face="verdana" color="white" ><b><u>Select a Class</u></b>    </font></p>
<br><br>

<div align="middle">

<!-- Angel -->
<img src="angel.png" height="110" width="110" alt="The Angel Class">
<input type="radio"  size="20" name="class" class="big" value="Angel" id="class_angel">
<p><font color="aquamarine" size="8"><b>The Angel</b></font></p>
<p><font color="aquamarine" size="6">A born fighter, for all that is good in the world.</font>        </p>
<br>
<p><font color="darkcyan" size="6"><b>Health: 10</b></font></p>
<p><font color="darkcyan" size="6"><b>Damage: 6</b></font></p>
<p><font color="darkcyan" size="6"><b>Starting Item: Halo</b></font></p>
<p><font color="darkcyan" size="4"><b>(Chance of doing double damage when on less than 5 health)

    </b></font></p>
<br><br>

<!-- Beast -->
<img src="beast.png" height="110" width="110" alt="The Beast Class">
<input type="radio"  size="20" name="class" class="big" value="Beast" id="class_beast">
<p><font color="brown" size="8"><b>The Beast</b></font></p>
<p><font color="brown" size="6">Savage at heart, teeth and mind.</font></p>
<br>
<p><font color="burlywood" size="6"><b>Health: 15</b></font></p>
<p><font color="burlywood" size="6"><b>Damage: 4</b></font></p>
<p><font color="burlywood" size="6"><b>Starting Item: Golden Ring</b></font></p>
<p><font color="burlywood" size="4"><b>(Chance of finding more gold)</b></font></p>
<br><br>

<!-- Spirit -->
<img src="spirit.png" height="110" width="110" alt="The Spirit Class">
<input type="radio"  size="20" name="class" class="big" value="Spirit" id="class_spirit">
<p><font color="papayawhip" size="8"><b>The Spirit</b></font></p>
<p><font color="papayawhip" size="6">Easier to see through his lies.</font></p>
<br>
<p><font color="thistle" size="6"><b>Health: 5</b></font></p>
<p><font color="thistle" size="6"><b>Damage: 10</b></font></p>
<p><font color="thistle" size="6"><b>Starting Item: Wandering Soul</b></font></p>
<p><font color="thistle" size="4"><b>(Chance of draining an enemies life)</b></font></p>
<br><br>

<img onclick="continueCheck()" src="next.png" alt="Continue" class="button">

</div>

<style type="text/css" media="screen">
.big{ width: 8em; height: 8em; }
.medium{ width: 16em; height: 8em; }
.button{ width: 6em; height:6em; }
</style>


<!-- Scripting -->
<script type="text/javascript">
function continueCheck()
{
    if(document.getElementById("class_angel") value="Angel")
    {
        console.log("You pressed Angel");
    }else if(document.getElementById("class_beast") value="Beast")
    {
        console.log("You pressed Beast");
    }else if(document.getElementById("class_spirit") value="Spirit")
    {
        console.log("You pressed Spirit");
    }
}
</script>

</body>

</html>

标签底部的区域似乎无效。 我收到错误消息“未捕获的ReferenceError:未定义VM68 classSelect.html:52的continueCheck”

您的语法全都提高了:

if(document.getElementById("class_angel") value="Angel")

看看行尾有一个随机的“)”吗?

编辑:我想你可能打算写:

function continueCheck()
{
    if(document.getElementById("class_angel").checked)
    {   
        console.log("You pressed Angel");
    }
    else if(document.getElementById("class_beast").checked)
    {    
        console.log("You pressed Beast");
    }
    else if(document.getElementById("class_spirit").checked)
    {

        console.log("You pressed Spirit");
    }
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM