JavaScript HTML DOM Event Listener 不起作用

我的代码：

<?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 事件侦听器？

因为你没有正确使用它。 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
}

代码应如下所示

<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所述，在声明函数时缺少单词函数。此外，id 属性应该是唯一的，因此 id="type_test" 只应分配一次。获取type_test单选按钮值的方法可以通过查询选择器完成，您的 id 调用不起作用，因为您必须找到被选中的那个。我假设您不想通过单击试用按钮来提交表单。最简单的方法是将按钮放在窗体外部。

还可以查看jQuery Javascript库，它使Javascript变得有趣:)

确保关闭每个括号：

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

为什么它不适用于 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>标记将被移动到<html>标记下的<body>标记中，因为这些是流内容，唯一允许的<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/en-US/docs/Web/HTML/Element/html)}

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

³_{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)}

相关内容

最新更新

热门标签：