Question

我正在为我的学校开发这个webapp。页面应该通过url参数“class”过滤条目。这可以正常工作，但是当我尝试更改过滤器时，它会给出“TypeError：object is not a function”。我究竟做错了什么？

<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>

Answer 1

看起来“oninput”处理程序从表单范围（document.forms [0]）而不是全局调用filter函数。如果检查document.forms [0] .filter的值，它将返回输入标记。您只需要确保函数名称与输入名称/ id不同。

这也意味着你不需要每次都通过id获取输入字段，它已经确定为这个

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

Answer 2

您遇到的问题是您的文本输入和您的功能共享一个通用名称。尝试重命名如下

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

您的代码仍然存在一些问题，但我会留下这些问题，因为这是学校作业; - ）

Answer 3

看看这是否解决了您的问题

<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>

<强>解释

您使用与输入文本框ID相同的名称命名了一个函数。当我更改函数的名称时，它停止了错误。

TypeError：object不是函数

3 个答案: