IE 8 Ternary Operator Oddness
Just ran across this at a client site where they're using older browsers.
We have a block of JavaScript that needs to fetch the text of an element. Since "innerText" doesn't work on Firefox, we have a statement like this:
var someValue = $.browser.mozilla ? element.textContent.toLowerCase() : element.innerText.toLowerCase();In Chrome, Firefox, Safari and IE 9+, all works as expected. IE 8, however, gives the error that toLowerCase() is not defined.
The solution?
var someValue;
if ($.browser.mozilla) {
someValue = element.textContent.toLowerCase();
} else {
someValue = element.innerText.toLowerCase();
}IE 8 apparently tries to parse both sides of the ternary before evaluating the truth of the conditional, causing this lovely little gotcha.
Written by Alec Lanter
Related protips
2 Responses
- parse != execute. I believe all sane intepreters parse both expressions before executing anything.
- a real proof would be to run var someValue = false ? alert("A") : alert("B"); If you will see both alerts, then surely something's wrong. Also if you see "A", then something's wrong.
- in your particular case I would start from a suspicion that $.browser.mozilla is true, and first try to check if I am right by replacing $.browser.mozilla with false. If problem persists, then I would go to ...
- check if the source of the problem lays in the splitting of the expression into two separate lines. Maybe it is just a formatting of the arcticle, but if in the real code you also have a newline, then it is possible that it is interpreted as the end of a statement. If that also doesn't help, then I woudl go with ...
- reading the error message again. Is it about calling a method on a non-object, or is it about missing method? First option means that element.innerText or element.textContent is missing, while the other means that the method toLowerCase() is missing. The later might mean that the field exists but is not a string.
I would like to see the real original code, could you paste it?
over 1 year ago
·
Why not
(element.textContent||element.innerText).toLowerCase()
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Internet explorer
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#