Error "TypeError: Cannot read property 'classList' of null"


Hello, I am trying when simple code to add datepicker in javascript using below HTML and Javascript Code, but I am getting error "TypeError: Cannot read property 'classList' of null", how can I resolve it?

cannot-read-properties-of-null-reading-classlist-min_sgpbi5.png

HTML/JS Code

  <div class="row">
                        <div class="col-4">Min Age Date:</div>
                        <div class="col-8">
                            <input type="text" class="form-control" name="MinAgeDate"/>
                            <input type="checkbox" name="Active" id="Active" /> Active
                        </div>
                    </div><br />
                    <div class="row">
                        <div class="col-12">
                            <input type="checkbox" name="IncludeOnConfirmationEmail" id="IncludeOnConfirmationEmail" /> Include confirmation on Email
                        </div>
                    </div><br />

<script>
        var minDate= document.getElementById("MinAgeDate");
        minDate.classList.add('datePickerClass');
</script>

Thanks.


Asked by:- bhanu
0
: 2888 At:- 9/14/2022 3:47:29 PM
Javascript Cannot read property 'classList' of null



add comment to question



1 Answers
profileImage Answered by:- vikas_jk

This error occurs when you are trying to following things:

  • Accessing the classList property on a null value, a DOM element that doesn't exist.
  • Placing Javascript script tag above the HTML where the DOM elements are declared.

So, as per your above code, you are using "name" attribute but not "id" attribute for 'MinAgeDate', here is the error explanation:

var minDate= document.getElementById("MinAgeDate"); //no element with ID 'MinAgeDate' exists in HTML
console.log(minDate); // null

//you will get error here
minDate.classList.add('datePickerClass');

Either add the attribute id to your input or change getElementById to getElementsByName.

I will add id attribute to input element, so your HTML will be like this

 <input type="text" class="form-control" name="MinAgeDate" id="MinAgeDate" />

That's it, you are done.
1
At:- 9/14/2022 3:53:17 PM
That worked as needed, thanks. 0
By : bhanu - at :- 9/14/2022 3:55:26 PM


comment to above answer

Patreon Become a Patron


Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use

Related Articles
8409
Export html table to excel using jQuery / Javascript
10058
How to get user location using Javascript / HTML5 Geolocation?
4056
Implementing Javascript Drag and Drop using HTML5
5384
Making all fields of Form as Read only (Disabled) using jQuery on page load.
10378
Convert Text to HTML using Javascript

Subscribe Now

Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly


Related Questions