Ошибка типа: объект не является функцией

ProgramBox

Ошибка типа: объект не является функцией

Post author:admin
Запись опубликована:4 мая, 2023
Post category:Вопросы по программированию

#javascript #javascript-events

#javascript

Вопрос:

Я разрабатываю это веб-приложение для своей школы. Предполагается, что страница фильтрует записи по параметру URL «class». Это работает нормально, насколько я могу судить, но когда я пытаюсь изменить фильтр, он выдает:

«Ошибка типа: объект не является функцией».

Что я делаю не так?

 <!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 = "[\?amp;]" name "=([^amp;#]*)";
              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. oninput является html5 и не поддерживается в IE<9 и имеет некоторые проблемы — как насчет onkeypress или onkeyup?

2.что случилось с text = text.toLowerCase(); if text в данном случае является аргументом, значение которого является object document.getElementById('filter') которым вы передали filter(document.getElementById('filter')) ?

3. Ошибка с моей стороны, он предназначен для передачи filter.value (теперь изменен на filterfield.value)

Ответ №1:

Похоже, что обработчик «oninput» вызывает функцию фильтра из области формы (document.forms[0]), а не глобально. Если вы проверите значение document.forms[0].filter, он вернет входной тег. Вам просто нужно убедиться, что имя функции отличается от входного имени / идентификатора.

Это также означает, что вам не нужно каждый раз получать поле ввода по идентификатору, оно уже определено как это

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

Ответ №2:

Проблема, с которой вы сталкиваетесь, заключается в том, что ваш текстовый ввод и ваша функция имеют общее имя. Попробуйте переименовать следующим образом

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

В вашем коде все еще есть некоторые проблемы, но я оставлю их для вас, чтобы вы могли разобраться, учитывая, что это школьное задание 😉

Ответ №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 = "[\?amp;]" name "=([^amp;#]*)";
              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>

Объяснение:

Вы назвали функцию с тем же именем, что и идентификатор текстового поля ввода. Когда я изменил имя функции, это остановило ошибку.