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

Question

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)
        }
      }
    );
  })();

Firefox does not support `innerText`. You have to use `textContent` instead. See http://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox. What happens is that when you access `innerText` the first them, it will be `undefined`, so the `else` branch will be executed, where you set `innerText`. — Felix Kling, Mar 18 '13 at 20:16
Note though that `textContent` is not supported in older IE versions, so you'd have to test first which property exists. — Felix Kling, Mar 18 '13 at 20:29

score 3 · Accepted Answer · answered Mar 18 '13 at 20:23

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.

This is exactly what's happened. Link start to work at second, but text wasn't changed. — Eugene Pavlov, Mar 18 '13 at 20:26

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

Solved

1 Answers1