CODEWITHSUNDEEP
javascriptasp.netfirefox
Eugene Pavlov
Eugene Pavlov

Reputation: 698

Why double click expecting instead of single click using javascript:void(0) in Firefox?

I have next link:

<a id="HeaderImage1Tab" style="display: block;" onclick="HeaderImage1Tab(this);" href="javascript:void(0)">- Header Image 1</a>

clicking this link call next js code:

function HeaderImage1Tab(link) {
    if (link.innerText == "+ Header Image 1") {
        document.getElementById("HeaderImage1Table").style.display = 'block';
        link.innerText = "- Header Image 1";
    } else {
        document.getElementById("HeaderImage1Table").style.display = 'none';
        link.innerText = "+ Header Image 1";
    }
}

Basically what it does is just showing/hiding table block below link. All works in every browser except Firefox. In Firefox I need to double click on link for code to fire and to see table block. And whats weird is that I need to double click only first time, and after it is working as expected.

Update #1: I'm working on asp.net site. I also have around 15 links like I mention above on the same page.

Solved

Update #2: Using textContent instead of innerText solve the problem. Appears that Firefox does not support inner text.

Update #3: This JS snipped fix issue of textContent in IE8 and older:

if (Object.defineProperty && Object.getOwnPropertyDescriptor &&
     Object.getOwnPropertyDescriptor(Element.prototype, "textContent") &&
    !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
  (function() {
    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
    Object.defineProperty(Element.prototype, "textContent",
      { 
        get : function() {
          return innerText.get.call(this)
        },
        set : function(x) {
          return innerText.set.call(this, x)
        }
      }
    );
  })();

Upvotes: 0

Views: 942

Answers (1)

AmericanUmlaut
AmericanUmlaut

Reputation: 2837

As Felix Kling says in the comment, innerText isn't supported in FireFox, you have to use textContent (here).

The reason double-click is working to show and hide the table is that the first time you click, it compares link.innerText, which is undefined because that property doesn't exist, to "+ Header Image 1". The values are not equal, so your second code block runs, creates an innerText property on the link object and sets it to "+ Header Image 1". After that, your logic will work (though it won't succeed in changing the actual text in the link), because Javascript will let you set properties on any object, even if those properties don't do anything.

Upvotes: 3

Related Questions