JavaScript HTML DOM事件监听器不起作用

Question

我的代码：

<?php 
  $id = 0;
  /*if(isset($_POST["type_test"]) && !empty($_POST["type_test"])){
    if($_POST["type_test"] == "ola"){
        echo "Ola José";
    }
    else if($_POST["type_test"] == "adeus"){
        echo "Adeus José";
    }
    else{

    }
  }*/


?>

<html>

<form  id="<?php echo $id; ?>" name ="form_test" action = "test_form.php" method="post" >
    <input type="radio" id = "type_test" name="type_test" value="ola"> ola <br>
    <input type="radio" id = "type_test" name="type_test" value="adeus"> adeus <br>
    <input type="submit" value="submit"> //imput only use for POST method
    <button id="myBtn">Try it</button>
    <script>

    </script>


</form> 
<script>
        document.getElementById("myBtn").addEventListener("click", functio_test;
        functio_test(){
            var x =document.getElementById.("type_test").value; 
            if(x == "ola" ){
                 alert("Ola José");
            }
            else if(x == "adeus" ){
                 alert("Adeus José");
            }
            else 
                alert("Continua José");
        }
</script>       
</html>

这是一个简单的程序，用于在触发按钮时出现警报消息。

我尝试了POST方法，它起作用了。 为什么它不适用于DOM事件监听器？

Answer 1

因为您没有正确使用它。 addEventListener应该这样调用：

 document.getElementById("myBtn").addEventListener("click", function(){
    // code here
 });

或者，您可以这样称呼它：

document.getElementById("myBtn").addEventListener("click", functio_test);

// and you must make sure to declare your function correctly
function functio_test(){
    // code here
}

Answer 2

确保关闭每个支架：

document.getElementById("myBtn").addEventListener("click", functio_test);

Answer 3

代码应如下所示

<form id="<?php echo $id; ?>" name ="form_test" action="test_form.php" method="post">
    <input type="radio" name="type_test" value="ola"> ola <br/>
    <input type="radio" name="type_test" value="adeus"> adeus <br/>
    <input type="submit" value="submit" /> <!--imput only use for POST method-->
</form>

<button id="myBtn">Try it</button>

<script>
        document.getElementById("myBtn").addEventListener("click", functio_test);

        function functio_test(){
            var x = document.querySelector('input[name="type_test"]:checked').value;
            if(x == "ola"){
                 alert("Ola José");
            }
            else if(x == "adeus"){
                 alert("Adeus José");
            }
            else {
                alert("Continua José");
            }
        }
</script>

“仅用于POST方法的输入”的注释不是真正的注释。 正如@Hossam之前提到的，您在addEventListeiner中缺少一个右括号。 正如@Cruiser所提到的，在声明函数时您会丢失单词function。 另外，id属性应该是唯一的，因此id =“ type_test”应该只分配一次。 可以通过查询选择器来获取type_test单选按钮的值的方法，您的id调用无效，因为您必须找到已选中的那个。 我假设您不想通过单击“尝试”按钮来提交表单。 最简单的方法是将按钮放在表单外部。

还请查看使Javascript有趣的jQuery Javascript库：）

Answer 4

为什么它不适用于DOM事件监听器？

对addEventListener（）的调用未关闭。

document.getElementById("myBtn").addEventListener("click", functio_test;

要解决此问题，请添加右括号：

document.getElementById("myBtn").addEventListener("click", functio_test);
//                                                                     ^

在下面的示例中查看此工作。 注意进行了一些更改：

在函数名称之前添加了函数关键字： function functio_test()
事件参数已接受： function functio_test(e)
事件默认行为（单击按钮提交表单）已停止： e.preventDefault()
从表单元素获取值（而不是通过id-因为它仅与具有该id属性的第一个输入有关）：
```
 var x = document.forms[0].elements.type_test.value; 
```
<input>标记没有允许的内容，因此是空元素，因此在标记的末尾添加了斜杠。 例如：
```
 <input type="radio" id="type_test" name="type_test" value="ola" /> // ^ 
```
更改了第二个单选按钮的id属性，因为“ id全局属性定义了一个唯一标识符（ID），该标识符在整个文档中必须是唯一的。 ” ²
```
 <input type="radio" id="type_test2" name="type_test" value="adeus" /> adeus <br> 
```
此外，如果该代码是不是在片断沙箱中， <form>和<script>标签将被移动到<body>下标签<html>标记，因为这些是流内容和用于只允许内容<head>是：“ 一个<head>元素，后跟一个<body>元素。 ” ¹
表单的id属性还带有文本“ form ”，因为“ 使用ASCII字母和数字以外的字符，“ _”，“-”和“。” 可能会导致兼容性问题，因为HTML 4中不允许这样做。尽管HTML 5中取消了此限制，但ID应当以字母开头以表示兼容性。 “ ³

 document.getElementById("myBtn").addEventListener("click", functio_test); function functio_test(e) { e.preventDefault(); var x = document.forms[0].elements.type_test.value; if (x == "ola") { alert("Ola José"); } else if (x == "adeus") { alert("Adeus José"); } else alert("Continua José"); }

 <form id="form0" name="form_test" action="test_form.php" method="post"> <input type="radio" id="type_test" name="type_test" value="ola" /> ola <br> <input type="radio" id="type_test2" name="type_test" value="adeus" /> adeus <br> <input type="submit" value="submit" /> //imput only use for POST method <button id="myBtn">Try it</button> </form>

¹ _{https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/html ）}

² _{https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/id}

³ _{https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/id ）}

JavaScript HTML DOM事件监听器不起作用

问题描述

4 个解决方案

解决方案1
2 2017-04-11 17:39:46

解决方案2
1 2017-04-11 17:40:19

解决方案3
1 已采纳 2017-04-11 18:18:41

解决方案4
1 2017-04-11 18:22:28

JavaScript HTML DOM事件监听器不起作用

问题描述

4 个解决方案

解决方案1 2 2017-04-11 17:39:46

解决方案2 1 2017-04-11 17:40:19

解决方案3 1 已采纳 2017-04-11 18:18:41

解决方案4 1 2017-04-11 18:22:28

解决方案1
2 2017-04-11 17:39:46

解决方案2
1 2017-04-11 17:40:19

解决方案3
1 已采纳 2017-04-11 18:18:41

解决方案4
1 2017-04-11 18:22:28