addEventListener for Datepicker and Timepicker produces Unca


Topic: addEventListener for Datepicker and Timepicker produces Uncaught TypeError:

Larab pro premium priority asked a year ago

Expected behavior To be able to read date and time picker changes.

Actual behavior eventlistener function not activated

Error in console log:

jquery.min.js:2 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at HTMLDocument.<anonymous> (DateTimeTest.html:106)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)
(anonymous) @ DateTimeTest.html:106
e @ jquery.min.js:2
...

Resources (screenshots, code snippets etc.)

// my date event listner for datepicker-with-filter 

    $(document).ready(function() {
        var myDatepicker = document.getElementById('.datepicker-with-filter');  
        myDatepicker.addEventListener('dateChange.mdb.datepicker', function (e) {
            alert("in event listner");
        })  
    });

Will pro premium priority answered a year ago

I'd like to see a snippet of this if you have time.

Anyway, could it be as simple as removing the . symbol from your getElementById?

document.getElementById('datepicker-with-filter');

Or changing the code to:

document.querySelector('.datepicker-with-filter');


Grzegorz Bujański staff answered a year ago

It seems the item you are looking for does not exist. You entered the wrong id, or you wanted to use querySelector instead of getElementById


Larab pro premium priority answered a year ago

I had several issues: 1. Will pointed out that I had my periods confused. 2. Grzegorz is also right that I needed to use querySelector instead of getElementById. 3. Placement of the js loading needed to be moved bellow the /body line.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No