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

您的代码中有很多语法错误。在你的函数中选择后你不需要（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事件无法使用单选按钮

2 个答案: