Onclick 事件不适用于单选按钮

Question

我是新手 html

我正在尝试添加带有单选按钮的 onclick 事件，但它不起作用。我无法弄清楚原因。请帮忙。

Example code
<script>
    function select(btn)
    {
     var1=document.getElementById("radio1");
     var2=document.getElementById("radio2");
     var3=document.getElementById("radio3");
     if(var1.checked==true)
     {
        document.myform.action="A.html";
     }
     elseif(var2.checked==true)
     {
        document.myform.action="B.html";
     }
     else
     {
        document.myform.action="C.html";
     }
   }
</script>

function test()
{
alert('Testing')
}

{% block radio_buttons %}
    <br><br><br>
    <!-- <input type="radio" id="radio1" name="project_type" value=0 checked    onclick="alert('yes')"><label>Projects I own</label> -->
    <input type="radio" id="radio1" name="project_type" value=0 checked onclick="select('this')"><label>Projects I own</label>
    <br>
    <input type="radio" id="radio2" name="project_type" value=1 onclick="test()"><label>Projects I manage</label>
<br>
    <input type="radio" id="radio3" name="project_type" value=1 onclick="select()"><label>Projects I can edit</label>
<br>
{% endblock %}

我在模板中添加了这段代码。我尝试添加警报。警报被执行但不是 onclick 事件

Answer 1

select 函数包含语法错误，因此永远不会执行。写：

 else if (var2.checked==true)

而不是

 elseif (var2.checked==true)

为避免此类错误，请打开浏览器的开发人员控制台并检查是否显示语法错误。

其次选择 select 作为函数名称是不幸的，因为输入元素有一个 select 函数被调用而不是你的函数。为避免这种情况，请重命名您的函数（例如 radioSelect）并相应地调用它（onclick="radioSelect(this);"）。

另外，您的 test 函数被放置在脚本元素之外，这不是一个好主意。

Answer 2

您的代码中有不少语法错误。而且您的函数中 select 之后不需要 (btn) 。您省略了几个分号，尤其是测试警报后的分号。

此代码有效

<head>
    <script>
    function select() {
    var1 = document.getElementById("radio1");
    var2 = document.getElementById("radio2");
    var3 = document.getElementById("radio3");
    if (var1.selected === true) {
        document.myform.action = "A.html";
    }
    else if(var2.selected === true) {
        document.myform.action = "B.html";
    } else {
        document.myform.action = "C.html";
    }
}


function test() {
    alert('Testing');
}
    </script>
</head>

<body>
    <br>
    <br>
    <br>
    <!-- <input type="radio" id="radio1" name="project_type" value=0 checked onclick="alert('yes')"><label>Projects I own</label> -->
    <input type="radio" id="radio1" name="project_type" value=0 checked onclick="select();">
    <label>Projects I own</label>
    <br>
    <input type="radio" id="radio2" name="project_type" value=1 onclick="test();">
    <label>Projects I manage</label>
    <br>
    <input type="radio" id="radio3" name="project_type" value=1 onclick="select();">
    <label>Projects I can edit</label>
</body>

这是一个fiddle

Onclick 事件不适用于单选按钮

Onclick event not working with radio button

html

javascript

events

onclick