Topic: addEventListener for Datepicker and Timepicker produces Uncaught TypeError:

Larab priority asked 2 years 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");
        })  
    });

Larab priority answered 2 years 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.


Grzegorz Bujański staff answered 2 years 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


Will free answered 2 years 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');



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: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No