Uncaught TypeError: Cannot set property 'checked' of null

Question

I am using a Javascript at javascript Hide/show div on checkbox: checked/unchecked.

var elem = document.getElementById('powermail_fieldwrap_331'),
    checkBox = document.getElementById('powermail_field_doruovaciaadresa2_1');
checkBox.checked = false;
checkBox.onchange = function doruc() {
    elem.style.display = this.checked ? 'block' : 'none';
};
checkBox.onchange();

I changed "checkBox.checked = false;" to "checkBox.checked = true;" It works anyway but produces an error: Uncaught TypeError: Cannot set property 'checked' of null

Demo

In this case, how I fix this error?

Thanks.

That means that `document.getElementById` isnt' finding an element with that ID. — Barmar, Jul 26 '15 at 07:12
I guess, your javascript code is executing before the DOM elements are ready on the page. May be,you need to execute the code that is trying to get the inputs after the DOM is ready. — Vamsi Krishna, Jul 26 '15 at 07:12
@Vimalan. Yes, no errors in Fiddle. But when it's in actual environment, IE or Chrome presents the error "Uncaught TypeError: Cannot set property 'checked' of null." If I change "true" to "false", no error. — Peter, Jul 26 '15 at 07:19
@Barmer. Thanks for your comment. It works fine in Fiddle. But when it's in actual environment, IE or Chrome presents the error "Uncaught TypeError: Cannot set property 'checked' of null." If I change "true" to "false", no error. — Peter, Jul 26 '15 at 07:20
@Peter Then, there must be something different in your code. Take a look again that it's exactly the same. — EmptyArsenal, Jul 26 '15 at 07:20
jsfiddle wraps all code in an onload event. that's why it works fine there. — Sebastian Nette, Jul 26 '15 at 07:27

score 4 · Accepted Answer · answered Jul 26 '15 at 07:25

The fiddle works fine. The only issue can be that the script is executed before the checkbox was part of the DOM.

Either wrap your code within an onload event.

window.onload = function() {
    var elem = document.getElementById('powermail_fieldwrap_331'),
    checkBox = document.getElementById('powermail_field_doruovaciaadresa2_1');
    checkBox.checked = false;
    checkBox.onchange = function doruc() {
        elem.style.display = this.checked ? 'block' : 'none';
    };
    checkBox.onchange();
};

Or make sure that the script tag is written after the checkbox is part of your DOM:

<label>
    <input type="checkbox" id="powermail_field_doruovaciaadresa2_1" checked="checked" />
    Show/hide
</label>
<div id="powermail_fieldwrap_331">Lorem ipsum</div>

<script>
var elem = document.getElementById('powermail_fieldwrap_331'),
    checkBox = document.getElementById('powermail_field_doruovaciaadresa2_1');
    checkBox.checked = true;
    checkBox.onchange = function() {
        elem.style.display = this.checked ? 'block' : 'none';
    };
    checkBox.onchange();
</script>

score 1 · Answer 2 · edited May 23 '17 at 11:46

1

Your code executes, before the document is fully ready, which is causing you to receive the ID as null, since it is not rendered yet.

It is a common problem, this is why in jquery you always use $(document).ready();

To make sure, that the document is fully loaded first and no elements will be executed before the document is fully loaded, preventing errors like this.

There is a very helpful post regarding this in java script:

Pure java script jquery ready

edited May 23 '17 at 11:46

Community

1
1

answered Jul 26 '15 at 07:23

Barr J

10,636
1
28
46

Can I move "checkBox.checked = true;" to behind "checkBox.onchange = function()": (http://jsfiddle.net/xSvLc/325/ ) Now it produces no error in my environment. I wonder if it's correct in jQuery grammar. – Peter Jul 26 '15 at 07:28

score 0 · Answer 3 · answered Sep 29 '19 at 12:40

0

You need to change all of tag without checked by

answered Sep 29 '19 at 12:40

thaimechatronics

1

score 0 · Answer 4 · answered Jan 24 '20 at 10:11

Your document.getElementById("checkboxid") contains null value. For that store it in a variable and then you can check like

  var checkbox = document.getElementById("chkteam");
        if (checkbox == true) {

         // your condition 
        }

Then It will Work.

Uncaught TypeError: Cannot set property 'checked' of null

4 Answers4

Linked