所以我试图创建一个带有单选按钮的测试页面，该按钮使用 onclick 来注册要在页面上显示的警报，但我无法让它与我当前的代码一起工作...我正在遵循一本书中的教程所以我改变了一些东西，但不明白为什么它不起作用。
<!DOCTYPE html>
<!-- radio_click.html
A document for radio_click.js
Creates five radio buttons that call the
colorChoice event handler to display desccriptions
-->
<html lang="en">
<head>
<title> radio_click.html</title>
<meta charset="utf-8" />
<script type="text/javascript" src="radio_click.js">
</script>
</head>
<body>
<h4> Choose from the five colors </h4>
<form id="myForm" action=" ">
<p>
<label><input type="radio" name="colorbutton" value="1" onclick="colorChoice(1)"/>Red</label>
</br>
<label><input type="radio" name="colorbutton" value="2" onclick="colorChoice(2)"/>Blue</label>
</br>
<label><input type="radio" name="colorbutton" value="3" onclick="colorChoice(3)"/>Green</label>
</br>
<label><input type="radio" name="colorbutton" value="4" onclick="colorChoice(4)"/>Yellow</label>
</br>
<label><input type="radio" name="colorbutton" value="5" onclick="colorChoice(5)"/>Orange</label>
</p>
</form>
<!-- script for registering event handlers -->
<script type = "text/javascript" src="radio_clickr.js">
</script>
</body>
</html>
JavaScript 文件(1)
// radio_click.js
// An example of the use of the click event with radio buttons,
// registering the event handler by assignment to the button attributes
// the event handler for a radio button collection
function colorChoice(color){
// put the DOm address of the elements array in a local variable
var dom = document.getElementById("myForm");
// determine which button was pressed
for(var index = 0; index < dom.colorButton.length; index++){
if(dom.colorButton[index].checked){
color = dom.colorButton[index].value;
break;
}
}
//Produce an alert message about the chosen airplane
switch(color){
case 1:
alert("Roses are red...");
break;
case 2:
alert("Violets are blue...");
break;
case 3:
alert("Green doesn't fit in this...");
break;
case 4:
alert("Yellow for lemon");
break;
case 5:
alert("What rhymes with orange?");
break;
default:
alert("Welp, that didn't work");
break;
}
}
以及下面的 javascript 文件(2)
// radio_clickr.js
// the event registering code for radio_click
var dom= document.getElementById("myForm");
dom.elements[0].onclick = colorChoice;
dom.elements[1].onclick = colorChoice;
dom.elements[2].onclick = colorChoice;
dom.elements[3].onclick = colorChoice;
dom.elements[4].onclick = colorChoice;
所有文件都位于同一个文件夹中，也许我的位置路径错误？
最佳答案
您的代码中需要进行一些更改。
colorButton对象未定义- 将 switch case 值从数字更改为字符串。
下面是修改后的代码。仅更改了 colorChoice 函数。
function colorChoice(color){
// put the DOm address of the elements array in a local variable
var dom = document.getElementById("myForm");
var colorButton = document.getElementsByName("colorbutton");
// determine which button was pressed
for(var index = 0; index < colorButton.length; index++){
if(colorButton[index].checked){
color = colorButton[index].value;
break;
}
}
//Produce an alert message about the chosen airplane
switch(color){
case '1':
alert("Roses are red...");
break;
case '2':
alert("Violets are blue...");
break;
case '3':
alert("Green doesn't fit in this...");
break;
case '4':
alert("Yellow for lemon");
break;
case '5':
alert("What rhymes with orange?");
break;
default:
alert("Welp, that didn't work");
break;
}
}
关于Javascript 基本单选按钮警报，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31631122/