JavaScript HTML DOM Event Listener doesn't work

Question

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?

This line is not proper: document.getElementById("myBtn").addEventListener("click", functio_test; — Waxi
– Waxi, Commented Apr 11, 2017 at 17:38

Cruiser · Accepted Answer · 2017-04-11 18:20:28Z

2

Because you're not using it correctly. addEventListener should be called like this:

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

Or, you can call it like so:

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

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

edited Apr 11, 2017 at 18:20

answered Apr 11, 2017 at 17:39

Cruiser

1,6162 gold badges16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CodingYourLife Over a year ago

for some reason I cannot edit your answer. You are missing a round closing bracket in your first example and a semicolon

CodingYourLife · Accepted Answer · 2017-04-12 10:59:13Z

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

Hossam · Accepted Answer · 2017-04-11 17:40:19Z

1

make sure you close every bracket:

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

answered Apr 11, 2017 at 17:40

Hossam

1,1469 silver badges19 bronze badges

Comments

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-04-11 23:16:41Z

Why does it not work with the DOM Event Listener?

The call to addEventListener() is not closed.

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

To fix this, add a closing parenthesis:

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

See this working in the example below. Notice a few changes were made:

function keyword added before function name: function functio_test()
event argument accepted: function functio_test(e)
event default behavior (button click submitting form) stopped: e.preventDefault()
getting value from the form elements (instead of by id - since that only relates to the first input with that id attribute):
```
var x = document.forms[0].elements.type_test.value;
```
The <input> tags have no permitted content and thus are empty elements, so the closing slash was added to the end of the tags. For example:
```
<input type="radio" id="type_test" name="type_test" value="ola" />
//                                                              ^
```
The id attribute of the second radio button was changed because "The id global attribute defines a unique identifier (ID) which must be unique in the whole document."²
```
<input type="radio" id="type_test2" name="type_test" value="adeus" /> adeus <br> 
```
Also if this code wasn't in the snippet sandbox, the <form> and <script> tags would be moved into a <body> tag under the <html> tag, since those are flow content and the only permitted contents for <head> are: "One <head> element, followed by one <body> element."¹
Also the id attribute of the form has the text 'form` prepended because "Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility."³

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

Collectives™ on Stack Overflow

JavaScript HTML DOM Event Listener doesn't work

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related