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

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

报告相同问题？

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！