Question

I am trying to unhide a DIV element if my extension in Firefox is not installed.

For this purpose i am using the following technique.

This doesn’t work in Firefox. it says

ExtensionNeeded is undefined.

I get the alert though. Please have a look at my code.

<div style="display: none;" class="alert alert-error" id="ExtensionNeeded">
                    <img style="visibility: hidden;
                        font-family: arial;" onerror="this.src='';alert('hello'); ExtensionNeeded.setAttribute('style','display:none;');" id="ffExt" src="">
                    <a onclick="ExtensionNeeded.setAttribute('style','display:none;');" data-dismiss="alert" class="close" id="CloseButton">×</a>
                    <h4 class="alert-heading">
                        Browser Extension Needed</h4>
                    <p>
                        SmartSignin needs browser extensions to work. Download the extensions by clicking
                        on the button below
                    </p>
                    <p>
                        <a onclick="window.location=('../Installer_files/release.xpi');ExtensionNeeded.setAttribute('style','display:none;');" class="btn btn-danger" id="ExtensionDownload" href="#">Download Extension!</a>
                        <a onclick="ExtensionNeeded.setAttribute('style','display:none;');" class="btn" id="DownloadLater" href="#">Download Later</a>
                    </p>
                </div>

Please help. I am picking my hair out on this.

Answer 1

ExtensionNeeded is a div not an object:

<div style="display: none;" class="alert alert-error" id="ExtensionNeeded">

if you want to get the ExtensionNeeded DOM element, query the DOM for it:

var ExtensionNeeded = document.getElementById('ExtensionNeeded');