Can't see a DOM node's style visibility through Javascript

Question

I need some logic in my Javascript to make a parentnode of a node in which an event was caught, disappear. To be specific, the parent node is a PDF link, and both it and its child node (bmp image) both need to be invisible if the child fails to load. Here is what I have outlined as my event listener function:

window.addEventListener('error', function(event) {
    console.log(event);
    if (event.target.id == "sheetBmp"){
        console.log("sheet bmp failed to load");
        //make the pdf disappear also
        e.target.parentNode.style.visibility=false;
        console.log("pdf nodeshould disappear");
    }
}, true);

and here is the styling:

    <a id=sheetPdf target='_blank'>
        <img id="sheetBmp" onLoad="this.style.visibility='visible'" onError="this.style.visibility='hidden'">
        </img>
    </a>

Note that I ran it through a debugger, and after the e.target.parentNode.style.visibility=false; line runs the property remains the same (blank quotes) and the visibility of the node remains visible on the webpage. Any assistance is greatly appreciated

Answer 1

You are setting an invalid value ( false ) to the property, so the browser is discarding it.

Acceptable values for the visibility property include "visible" and "hidden" .