javascript - Uncaught TypeError:Cannot read property path issue

Question

I have an HTML page with an iframe similar to this:

<div id="searchbox" background-size: cover;" class="img-responsive center-block" >
   <iframe src="/custom_scripts/tbox/tbox.aspx" />
   <div id="blackout" style="background-image:url(/skins/default/images/blackout.png); opacity: 0.5; display:none;"></div>
</div>

So in the tbox.aspx I have:

    <script type="text/javascript">
        function blockme() {
            document.getElementById('blackout').style.display = 'block';
        }
    </script>

<div id="divResults" class="options" onclick="blockme();"></div>

However when I click into "divResults" it is giving me an error "Uncaught TypeError: Cannot read property 'style' of null"

I know this error is related to the the 'blackout' element path which I am not being able to drill into document to find it.

Any help?

question from:https://stackoverflow.com/questions/65919784/uncaught-typeerrorcannot-read-property-path-issue

Answer 1

Your function blockme execute in a iframe, this mean document is document content of iframe only, the iframe not include element with id is blackout. It belong to parent document.

Let's try:

    <script type="text/javascript">
        function blockme() {
            parent.document.getElementById('blackout').style.display = 'block';
        }
    </script>