javascript新手，单选按钮不'；t工作，不允许使用参数
我正在尝试使用javascript函数制作单选按钮，当选择一个按钮时，会调用该函数，使图像根据它们单击的内容显示。然而，在查找了一段时间后，我什么都没有，因为有些人告诉我要执行document.formName.name.value；有些人告诉我在按钮上使用id，只需使用javascript新手，单选按钮不'；t工作，不允许使用参数,javascript,button,radio-button,Javascript,Button,Radio Button,我正在尝试使用javascript函数制作单选按钮，当选择一个按钮时，会调用该函数，使图像根据它们单击的内容显示。然而，在查找了一段时间后，我什么都没有，因为有些人告诉我要执行document.formName.name.value；有些人告诉我在按钮上使用id，只需使用document.getElementByID（“”）等 这是一个项目，我们还没有使用参数，我也不知道如何在HTML中实现它们 这是我的代码： <html> <head> <style ty
document.getElementByID（“”）等
这是一个项目，我们还没有使用参数，我也不知道如何在HTML中实现它们
这是我的代码：
<html>
<head>
<style type="text/css">
img{height:200px;}
body{background-image:url('wood.jpg');}
span.a1{margin-left:150px; display:inline-block;}
h2, span, h4, div{font-family:helvetica; color:white;}
h2 {text-align:center; margin-top:150px;}
img.display{position:absolute; left:400px; height:300px; }
</style>
<script type="text/javascript">
dex1=0;
stam1=0;
str1=0;
intel1=0;
agil1=0;
function counter()
{
document.getElementById("dex").innerHTML = dex1;
document.getElementById("stam").innerHTML = stam1;
document.getElementById("str").innerHTML = str1;
document.getElementById("intel").innerHTML = intel1;
document.getElementById("agil").innerHTML = agil1;
}
function classChoice()
{
if(document.getElementById('mage').checked)
{
classtype = "<img class='display' src='mage.jpg'>";
document.getElementById("mage").innerHTML=classtype;
}
else if(document.getElementById('paladin').checked)
{
classtype = "<img class='display' src='paladin.jpg'>";
document.getElementById("Paladin").innerHTML=classtype;
}
else if(document.getElementById('hunter').checked)
{
classtype = "<img class='display' src='hunter.jpg'>";
document.getElementById("hunter").innerHTML=classtype;
}
else if(document.getElementById('rogue').checked)
{
classtype = "<img class='display' src='rogue.jpg'>";
document.getElementById("rogue").innerHTML=classtype;
}
}
</script>
</head>
<body>
<h2> Awesome MMO </h2>
<span class="a1">
<h4> Dexterity </h4>
<span onmousedown="dex1++; counter();">
+
</span>
<span id="dex">
0
</span>
<span onmousedown="dex1--; counter();">
-
</span>
</span>
<span class="a1">
<h4> Stamina </h4>
<span onmousedown="stam1++; counter();">
+
</span>
<span id="stam">
0
</span>
<span onmousedown="stam1--; counter();">
-
</span>
</span>
<span class="a1">
<h4> Strength </h4>
<span onmousedown="str1++; counter();">
+
</span>
<span id="str">
0
</span>
<span onmousedown="str1--; counter();">
-
</span>
</span>
<span class="a1">
<h4> Intellect </h4>
<span onmousedown="intel1++; counter();">
+
</span>
<span id="intel">
0
</span>
<span onmousedown="intel1--; counter();">
-
</span>
</span>
<span class="a1">
<h4> Agility </h4>
<span onmousedown="agil1++; counter();">
+
</span>
<span id="agil">
0
</span>
<span onmousedown="agil1--; counter();">
-
</span>
</span>
<h2> Class </h2>
<span class="a1">
<br />
<form name="class">
<input type="radio" name = "classes" id="mage" onmousedown="classChoice();"> <img src = "mage.jpg" />
<input type="radio" name = "classes" id = "Paladin" onmousedown="classChoice();"> <img src = "Paladin.png" />
<input type="radio" name = "classes" id = "hunter" onmousedown="classChoice();"> <img src = "hunter.PNG" />
<input type="radio" name = "classes" id = "rogue" onmousedown="classChoice();"> <img src = "rogue.jpg" />
</form>
</span>
<span id="picture">
</span>
</body>
img{高度：200px；}
正文{背景图像：url（'wood.jpg'）；}
span.a1{左边距：150px；显示：内联块；}
h2，span，h4，div{字体系列：helvetica；颜色：白色；}
h2{文本对齐：居中；页边距顶部：150px；}
图像显示{位置：绝对；左侧：400px；高度：300px；}
dex1=0；
stam1=0；
str1=0；
intel1=0；
agil1=0；
函数计数器（）
{
document.getElementById（“dex”）.innerHTML=dex1；
document.getElementById（“stam”）.innerHTML=stam1；
document.getElementById（“str”）.innerHTML=str1；
document.getElementById（“英特尔”）.innerHTML=intel1；
document.getElementById（“agil”）.innerHTML=agil1；
}
函数classChoice（）
{
if（document.getElementById（'mage'）。选中）
{
classtype=“”；
document.getElementById（“mage”）.innerHTML=classtype；
}
else if（document.getElementById（'paladin'）。选中）
{
classtype=“”；
document.getElementById（“Paladin”）.innerHTML=classtype；
}
else if（document.getElementById（'hunter'）。选中）
{
classtype=“”；
document.getElementById（“hunter”）.innerHTML=classtype；
}
else if（document.getElementById（'rogue'）。选中）
{
classtype=“”；
document.getElementById（“rogue”）.innerHTML=classtype；
}
}
棒极了的MMO
灵巧
+
0
-
耐力
+
0
-
力量
+
0
-
智力
+
0
-
敏捷性
+
0
-
班
按id获取单选按钮应该没问题，但使用checked
属性测试它们当前是否已选中：
if(document.getElementById('mage').checked)
{
classtype = "<img class='display' src='mage.jpg'>";
document.getElementById("picture").innerHTML=classtype;
}
$('input').click(function () {
if ($(this).attr('id') == 'mage') {
//add code here to set the source of your image
$(myImage).attr('src','path/to/your/chosen/image');
});
按id获取单选按钮应该可以，但使用checked
属性测试它们当前是否已选中：
if(document.getElementById('mage').checked)
{
classtype = "<img class='display' src='mage.jpg'>";
document.getElementById("picture").innerHTML=classtype;
}
$('input').click(function () {
if ($(this).attr('id') == 'mage') {
//add code here to set the source of your image
$(myImage).attr('src','path/to/your/chosen/image');
});
我想你可能想看看jQuery，它肯定会让你更容易
使用此库，您可以简化代码-这是一个基于您的需求的半完整示例-它只查看单选按钮上的单击事件-您需要添加一个检查以查看元素是否已被检查：
if(document.getElementById('mage').checked)
{
classtype = "<img class='display' src='mage.jpg'>";
document.getElementById("picture").innerHTML=classtype;
}
$('input').click(function () {
if ($(this).attr('id') == 'mage') {
//add code here to set the source of your image
$(myImage).attr('src','path/to/your/chosen/image');
});
您可以重复else if语句来处理每个案例，或者编写一个更优雅的解决方案。学习jQuery（或prototype或extjs等其他库）将大大减少编写javascript的时间，并提高工作的跨浏览器兼容性我想你可能想看看jQuery，这肯定会让你更容易
使用此库，您可以简化代码-这是一个基于您的需求的半完整示例-它只查看单选按钮上的单击事件-您需要添加一个检查以查看元素是否已被检查：
if(document.getElementById('mage').checked)
{
classtype = "<img class='display' src='mage.jpg'>";
document.getElementById("picture").innerHTML=classtype;
}
$('input').click(function () {
if ($(this).attr('id') == 'mage') {
//add code here to set the source of your image
$(myImage).attr('src','path/to/your/chosen/image');
});
您可以重复else if语句来处理每个案例，或者编写一个更优雅的解决方案。学习jQuery（或prototype或extjs等其他库）将大大减少编写javascript的时间，并提高工作的跨浏览器兼容性如果您希望在选择更改时执行某些操作，则应使用jQuery的change（）
函数
$('#myRadioButton').change(function(){
// Do whatever you want to do with the new value
// You get the value with $(this).val()
});
如果希望在选择更改时执行某些操作，则应使用jQuery的change（）
函数
$('#myRadioButton').change(function(){
// Do whatever you want to do with the new value
// You get the value with $(this).val()
});
结果是，onmousedown
使我不得不双击每个单选按钮，因为我无意中发现，愤怒地点击我的按钮。结果，当我无意中发现愤怒地点击我的按钮时，onmousedown
使我不得不双击每个单选按钮。不要使用=
真的，这几乎总是多余的。我不知道如何使用jfiddle，因为我有难以直接引导的图像path@minitech在Javascript中，您可能需要检查对象是否实际上是布尔值true
，而不是不同的“truthy”值。（当然你需要三个等式：if（something==true）
@ineradial:没错==true
几乎总是多余的。虽然有时您可能希望检查变量是否为布尔值true，而不仅仅是“truthy”，但大多数情况下，您看到的代码都带有something==true
或something==true
类型的“som”