Javascript in Chrome not compatible with Firefox Mozilla

Question

I made a search engine which works with javascript instead of being backend with sql queries. It works fine in Chrome but it doesn't work on firefox. I thought pure javascript would be compatible with all navigators. Could someone tell me which part is being refused by firefox.

I am trying to duplicate this search engine in JQuery as jquery makes everything compatible with eachother, but i am having some trouble with the each() function. I am new to JQuery.

The logic is :

The CMS auto-creates the content on the page about country related documents. The auto generated code looks like:

So i target the class "csc-firstheader" which contains the reference to the country, and get its parent's parent and make it's css property display = 'none'

The script is as follows

               <script type="text/javascript">
               function filterByCountry(){
                 var inputField = document.getElementById('search-field');
                 var string = inputField.value;
                 if(string!=""){        
                  var headers =  document.getElementsByClassName('csc-firstHeader');
                  var errorMessage = document.getElementById('failure-message');
                        errorMessage.style.display = "none";
                  var exist=0;
                        for(var i=0;i<headers.length;i++){
                                if( headers[i].innerText.toLowerCase() !=                    string.toLowerCase() ){
                                    var header = headers[i]; 
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header.style.display = "none";
                                    header.style.position = "relative";
                                    header.style.top = "0px";
                                    header.style.left = "0px";
                                    header.style.width = "292px";
                                }
                                if( headers[i].innerText.toLowerCase() ==                                                          string.toLowerCase() ){
                                     exist=1;
                                    var header = headers[i]; 
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header.style.display = "inline-block";
                                    header.style.position = "absolute";
                                    header.style.top = "110px";
                                    header.style.left = "48px";
                                    header.style.width = "482px";

                                }
                        }
                    if(exist == 0){
                        errorMessage.style.display = "inline-block";
                    }
                    }

               </script>

The search bar is :

                    <div id="search-container">
                        <input type="text" id="search-field"  placeholder="search a specific country" />
                        <button id="search-button" onclick="filterByCountry()" > Search </button>



                 </div>

The JFiddle

http://jsfiddle.net/arj196/5RkLL/

Answer 1

Firefox doesn't support the innerText property.

You should use textContent instead for Firefox (and all browsers which support it, as this is the standard W3C property). You can check for both like this:

var header = headers[i];
var headerText = header.textContent || header.innerText;
if( headerText.toLowerCase() == string.toLowerCase() ){

Other than that, I don't see any other functions or properties which aren't supported by most major browsers. For reference, you can have a look in the error console on the browser which doesn't work - it should show something like Cannot call function "toLowerCase" on undefined. That tells you that innerText is undefined. Then you can Google to see which browsers support that property.