. Document.getElementById ( "ID") нажмите ();не определено - Попытка щелкнуть () кнопку фильтра с помощью JavaScript - PullRequest
Новая
       37

. Document.getElementById ( "ID") нажмите ();не определено - Попытка щелкнуть () кнопку фильтра с помощью JavaScript

0 голосов
/ 06 октября 2019

Первое сообщение за долгое время, надеюсь, я достаточно хорошо следовал правилам.

Я пытаюсь использовать URL для фильтрации содержимого на странице. Я пытаюсь сделать это программно с помощью JavaScript после загрузки страницы.

Скажем, базовый URL: 

test.html

И я собираюсь зайти на страницу с помощью перенаправления, используя: 

test.html?cat1

<!DOCTYPE html>
<html>
    <body>
        <style>
            .filter {
              text-align: center;
              list-style: none;
              padding: 0;
              margin: 0 0 70px;
            }
        </style>

        <div id="titleSub">Category Description</div>
        <div id="titleMain">Category Title</div>
        <ul>
            <li><a href="#" data-filter="*" id="allFilter">Category All</a></li>
            <li><a href="#" data-filter=".cat1" id="cat1Filter">Category 1</a></li>
            <li><a href="#" data-filter=".cat2" id="cat2Filter">Category 2</a></li>
            <li><a href="#" data-filter=".cat3" id="cat3Filter">Category 3</a></li>
            <li><a href="#" data-filter=".cat4" id="cat4Filter">Category 4</a></li>
            <li><a href="#" data-filter=".cat5" id="cat5Filter">Category 5</a></li>
        </ul>

        <ul>
            <li class="cat1">Item 1</li>
            <li class="cat2">Item 2</li>
            <li class="cat1 cat3">Item 3</li>
            <li class="cat3 cat4">Item 4</li>
        </ul>

        <script>
            var fullURL = window.location.href;
            var brokenURL = fullURL.split('?');
            var filter = brokenURL[1];
            console.log("filter: " + filter);
            console.log("readyState: " + document.readyState);
            window.onload = function() {
                console.log("page loaded");
                console.log("readyState: " + document.readyState);

                console.log("entered filterFunction");

                if (filter == "cat1") {
                    console.log("in cat1");
                    document.getElementById("cat1Filter").click().catch(function(error) {
                        console.error(error);
                    });
                }
                else if (filter == "cat2") {
                    console.log("in cat2");
                    document.getElementById("cat2Filter").click();
                }
                else if (filter == "cat3") {
                    document.getElementById("cat3Filter").click();
                }
                else if (filter == "cat4") {
                    document.getElementById("cat4Filter").click();
                }
                else if (filter == "cat5") {
                    document.getElementById("cat5Filter").click();
                }
            }
        </script>

        <script>
            document.querySelector("#allFilter").addEventListener('click', function(e) {
                document.querySelector('#titleMain').innerHTML = "Category All";
                document.querySelector('#titleSub').innerHTML = "All Description";
                console.log("changed titles");
            });
            document.querySelector("#cat1Filter").addEventListener('click', function(e) {
                document.querySelector('#titleMain').innerHTML = "Category 1";
                document.querySelector('#titleSub').innerHTML = "Description 1";
                console.log("changed titles");
            });
            document.querySelector("#cat2Filter").addEventListener('click', function(e) {
                document.querySelector('#titleMain').innerHTML = "Category 2";
                document.querySelector('#titleSub').innerHTML = "Description 2";
                console.log("changed titles");
            });
            document.querySelector("#cat3Filter").addEventListener('click', function(e) {
                document.querySelector('#titleMain').innerHTML = "Category 3";
                document.querySelector('#titleSub').innerHTML = "Description 3";
            });
            document.querySelector("#cat4Filter").addEventListener('click', function(e) {
                document.querySelector('#titleMain').innerHTML = "Category 4";
                document.querySelector('#titleSub').innerHTML = "Description 4";
            });
            document.querySelector("#cat5Filter").addEventListener('click', function(e) {
                document.querySelector('#titleMain').innerHTML = "Category 5";
                document.querySelector('#titleSub').innerHTML = "Description 5";
            });
        </script>
    </body>
</html>

Что странноменя то, что тексты titleSub и titleMain изменяются правильно, но фильтрация, похоже, не срабатывает. Если вы проверяете журналы, на нем отображается: 

TypeError: document.getElementById(...)click(...) is undefined

Но если вы были введены непосредственно в консоль: 

document.getElementById("cat1Filter").click()

... он эффективно нажимает кнопку и фильтрует содержимое.

Я проверяю, загружена ли вся страница перед запуском этого скрипта, поэтому я не думаю, что это связано с синхронизацией. Тем более, что названия меняются правильно.

Немного озадачен и занимался этим часами. Любые предложения или идеи приветствуются!

...