TypeError: object is not a function

Question

I'm developing this webapp for my school. The page is supposed to filter entries by the URL parameter "class". This works fine as far as I can tell, but when I try to change the filter it gives:

"TypeError: object is not a function".

What am I doing wrong?

<!DOCTYPE HTML>

<html>
    <head>
        <TITLE>Cancelled lessons</TITLE>

    </head>
    <body>
                        
        <script>        
            function filter(text){
                text = text.toLowerCase();
                for (i=0;i<lessonList.length;i++){
                    if(lessonList[i].innerHTML.toLowerCase().indexOf(text)==-1){
                        lessonList[i].style.display = "none";
                    }
                    else{
                        lessonList[i].style.display ="";
                    }
                }
            }
            
            function gup( name )
            {
              name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
              var regexS = "[\\?&]"+name+"=([^&#]*)";
              var regex = new RegExp( regexS );
              var results = regex.exec( window.location.href );
              if( results == null )
                return "";
              else
                return results[1];
            }
        </script>

        <form>
            Filter: <input type="text" id="filter" oninput="filter(document.getElementById('filter'))"/>
        </form>
        
        <div id="lessons">
            <div class="entry"> MaA 11:00 C131 Ej NV3C</div>
        </div>
        
        <script>
            var lessonList = document.getElementsByClassName("entry");
            var filterField =document.getElementById("filter");
            filterField.value = gup("class");
            filter(filterField.value);
        </script>
    </body>
</html>

[oninput](http://msdn.microsoft.com/en-us/library/gg592978%28v=vs.85%29.aspx) is html5 and is not supported in IE<9 and has some [issues](http://blog.danielfriesen.name/2010/02/16/html5-browser-maze-oninput-support/) - how about onkeypress or onkeyup? — mplungjan, May 11 '11 at 05:28
what's up with `text = text.toLowerCase();` if `text` in this case is an argument whose value is an `object` `document.getElementById('filter')` that you passed by `filter(document.getElementById('filter'))`? — tradyblix, May 11 '11 at 05:36
Mistake on my side, it's meant to pass filter.value (changed now to filterfield.value) — remuladgryta, May 11 '11 at 08:36

score 4 · Accepted Answer · answered May 11 '11 at 04:08

It looks like the "oninput" handler calls the filter function from the scope of the form (document.forms[0]) rather than globally. If you check the value of document.forms[0].filter it'll return the input tag. You just need to make sure that the function name is different than the input name/id.

This also means you don't need to get the input field by id every time, it's already scoped as this

<input type="text" id="filterField" oninput="filter(this.value)"/>

Thanks, this is the first thing i've done in js, being a c# programmer, it's stupid i didn't think of that! — remuladgryta, May 11 '11 at 08:12

score 2 · Answer 2 · answered May 11 '11 at 04:05

2

The problem you have is that your text input and your function share a common name. Try renaming as follows

<input type="text" id="filterText" oninput="filter(document.getElementById('filterText'))"/>

There are still some problems with your code, but I'll leave those for you to figure out, given this is a school assignment ;-)

answered May 11 '11 at 04:05

Tom Groves

21
2

It's not a school assignment in that sense, i got asked to do it by the headmaster since i'm the head of our school's computer union. – remuladgryta May 11 '11 at 08:26

score 0 · Answer 3 · answered May 11 '11 at 04:03

See if this solves your problem

<html>
    <head>
        <TITLE>Cancelled lessons</TITLE>

    </head>
    <body>

        <script>        
            function fltr(text){
                text = text.toString().toLowerCase();
                for (i=0;i<lessonList.length;i++){
                    if(lessonList[i].innerHTML.toLowerCase().indexOf(text)==-1){
                        lessonList[i].style.display = "none";
                    }
                    else{
                        lessonList[i].style.display ="";
                    }
                }
            }

            function gup( name )
            {
              name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
              var regexS = "[\\?&]"+name+"=([^&#]*)";
              var regex = new RegExp( regexS );
              var results = regex.exec( window.location.href );
              if( results == null )
                return "";
              else
                return results[1];
            }
        </script>

        <form>
            Filter: <input type="text" id="filter" oninput="fltr(document.getElementById('filter'))"/>
        </form>

        <div id="lessons">
            <div class="entry"> MaA 11:00 C131 Ej NV3C</div>
        </div>

        <script>
            var lessonList = document.getElementsByClassName("entry");
            var filterField =document.getElementById("filter");
            filterField.value = gup("class");
            fltr(filterField.value);
        </script>
    </body>
</html>

Explanation:

You named a function with the same name of the input text-box id. When I changed the name of the function, it stopped the error.

`text = text.toString().toLowerCase()` will give you `[object htmlinputelement]` because `text` is a reference to `document.getElementById('filter')` — tradyblix, May 11 '11 at 05:37

TypeError: object is not a function

3 Answers3

Linked