Check to see ff eventistener works/

JavaScript
#1

when I make a change in my select box, how can I tell if the function is firing?

<script>
document.getElementById('to_device_id').addEventListener('change',postPorts);

    function postPorts(e){
      e.preventDefault();


      var xhr = new XMLHttpRequest();
      xhr.open('POST', '../data_connections/port_options.php');
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

      xhr.onload = function(){
        document.getElementById('Ports').innerHTML = this.responseText;
      }

	  xhr.send("to_device_id="+document.getElementById('to_device_id').value);

    }
</script>
#2

One super easy way is to toss a console.log() function call in your function and have it log something to the browser console. Quick and easy to do and will tell you if the function is firing as any time it is triggered it would write a message to the console. Use the console.log to also log out variable values, returned results etc.

2 Likes
#3

Also, given that the function calls an XHR request, you can look at the Network tab of your developer tools to see if it’s sending the request out for the port options…

1 Like