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.

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.

• javascript

• 3 That means that document.getElementById isnt' finding an element with that ID. – Barmar Commented Jul 26, 2015 at 7: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 Commented Jul 26, 2015 at 7:12
• It seems to be working fine in the fiddle. – Barmar Commented Jul 26, 2015 at 7:15
• @Peter, thanks. But, I don't see any error in fiddler.. – JGV Commented Jul 26, 2015 at 7:15
• 1 jsfiddle wraps all code in an onload event. that's why it works fine there. – Sebastian Nette Commented Jul 26, 2015 at 7:27

4 Answers 4

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>

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 mon 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

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.

You need to change all of tag without checked by