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

时间:2014-11-15 19:22:25

标签: javascript

我已经检查过论坛,找不到任何可以直接帮助或与我的问题相关的内容,所以请点击此处。我正在为学校制作一个游戏,玩家会看到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>

标签底部的区域似乎不起作用。我收到错误&#34; Uncaught ReferenceError:continueCheck未定义VM68 classSelect.html:52&#34;

1 个答案:

答案 0 :(得分:0)

你的语法全都搞定了:

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