Rice Rice - 2 months ago 10
CSS Question

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

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

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".

Comments