可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

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

回答1:

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)"/>

回答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 ;-)

回答3:

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.

文章来源: TypeError: object is not a function

标签

oninput