douyue7408 2017-04-11 17:35
浏览 271
已采纳

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

My code:

<?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>

This is a simple program for when a button is triggered, an alert message appears.

I tried with the POST method and it worked. Why does it not work with the DOM Event Listener?

  • 写回答

4条回答 默认 最新

  • duanmou9228 2017-04-11 18:18
    关注

    Code should look like this

    <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>

    Comment for "imput only use for POST method" was not a real comment. As mentioned before by @Hossam you are missing a closing bracket in the addEventListeiner. As mentioned by @Cruiser you are missing the word function when declaring the function. Also an id attribute should be unique so id="type_test" should only be assigned once. The way to get the value of the type_test radio buttons can be done via query selector your id call did not work because you have to find the one that is checked. I assume you don't want to submit the form by clicking on the try it button. The easiest way is to put the button outside of the form.

    Also check out the jQuery Javascript library which makes Javascript fun :)

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥15 srs-sip外部服务 webrtc支持H265格式
  • ¥15 在使用abaqus软件中，继承到assembly里的surfaces怎么使用python批量调动
  • ¥15 大一C语言期末考试，求帮助🙏🙏
  • ¥15 ch340驱动未分配COM
  • ¥15 Converting circular structure to JSON
  • ¥30 Hyper-v虚拟机相关问题，求解答。
  • ¥15 TSM320F2808PZA芯片 Bootloader
  • ¥45 谷歌浏览器出现开发者工具无法显示已创建的，但您可以调试已部署的代码。 状态代码 404， net::ERR HTTP RESPONSE CODE FAILURE
  • ¥15 如何解决蓝牙通话音频突发失真问题
  • ¥15 安装opengauss数据库报错