How to check if element ID is in a document?

Question

My site serves dynamic contents so the header and footer remains the same. In the footer is my JS script that has a few document.getElementById('ids').addEventListener('click',function(e). How can I prevent the JS error TypeError: document.getElementById(...) is null when the content with the element ID was not yet served? See sample JS code below:

    <script>
        // DN_1, 1st page Switch On/Off
        document.getElementById('dn_1_yes-no').addEventListener('click',function(e){
            var attrChk = document.getElementById('dn_1_yes-no'); 
            if( this.checked){
                document.getElementById('external_dn_1').style.display='block';
            }else{
                document.getElementById('external_dn_1').style.display='none';
            }
        });

        // DN_2, 2nd page Switch On/Off
        document.getElementById('dn_2_yes-no').addEventListener('click',function(e){
            var attrChk = document.getElementById('dn_2_yes-no'); 
            if( this.checked){
                document.getElementById('external_dn_2').style.display='block';
            }else{
                document.getElementById('external_dn_2').style.display='none';
            }
        });

        // more.....

    </script>

Just serve dynamic content in the footer as well - only those scripts that the dynamic main content needs? — Bergi, Oct 08 '17 at 16:24
Your title question (how to defer) doesn't match your post content (how to avoid error). What exactly are you asking? And what do you mean by "not yet served"? — Bergi, Oct 08 '17 at 16:25
How could that be when the content has not yet served? Jquery or DOM should not able to find it because it's not yet loaded. — Carl Barrett, Oct 08 '17 at 16:25
Bergi, that's a good idea. I have thought along that line, but I was thinking JS may have a provision or method. — Carl Barrett, Oct 08 '17 at 16:30
Bergi, the web server serves the page and the web browser loads it. If the user did not yet click the link to the page it won't serve. — Carl Barrett, Oct 08 '17 at 16:40

score 0 · Answer 1 · answered Oct 08 '17 at 18:10

This works!

    <script>
        var dn1Ele = document.getElementById('dn_1_yes-no');
        var dn2Ele = document.getElementById('dn_2_yes-no');

        if(dn1Ele != null) { 
            // DN_1 Switch On/Off
            document.getElementById('dn_1_yes-no').addEventListener('click',function(e){
                var attrChk = document.getElementById('dn_1_yes-no'); 
                if( this.checked){
                    document.getElementById('external_dn_1').style.display='block';
                }else{
                    document.getElementById('external_dn_1').style.display='none';
                }
            });
        }

        if(dn2Ele != null) { 
            // DN_2 Switch On/Off
            document.getElementById('dn_2_yes-no').addEventListener('click',function(e){
                var attrChk = document.getElementById('dn_2_yes-no'); 
                if( this.checked){
                    document.getElementById('external_dn_2').style.display='block';
                }else{
                    document.getElementById('external_dn_2').style.display='none';
                }
            });
        }

        // more.....

    </script>

How to check if element ID is in a document?

1 Answers1