Question

所以我正在尝试创建一个带有单选按钮的测试页面，使用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;

所有文件都位于同一个文件夹中，或许我的位置路径错误了？

Answer 1

您的代码中需要进行少量更改。

colorButton对象未定义
将开关案例值从数字更改为字符串。

以下是修改后的代码。只更改了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;
    }
}

Answer 2

代码中的for循环完全不需要。调用该函数时，它已经将单击的单选按钮的编号作为参数。然后循环浏览按钮（在其他答案中指出错误）以再次获得相同的信息。

然而，找出所点击的单选按钮的值的最佳方法不是您正在使用的两个中的任何一个。相反，您可以使用包含对触发事件的DOM元素的引用的变量this。它具有包含所需信息的属性value。所以你的代码可能如下所示。

HTML：

<label><input type="radio" name="colorbutton" value="1" onclick="colorChoice()"/>Red</label>

JS：

function colorChoice(){

    //Produce an alert message about the chosen airplane
    switch(this.value){
        case '1':
        alert("Roses are red...");
        break;
        //And so on....
    }
}

Javascript基本单选按钮提醒

2 个答案: