Question

我正在尝试为li标签创建搜索功能，我有一个事件侦听器，但是即使我将其更改为click，keyup事件侦听器也似乎没有运行。我想如果它能正常工作的话，它将控制台日志我放置在我那里的东西。

const wikiSearch = document.getElementById("wikiSearch");
const pageList = document.getElementById("wikiList");

wikiSearch.addEventListener('keyup', function(e){
    const term = e.target.value.toLowerCase();
    const pages = pageList.getElementsByTagName("li");
    console.log("its working");
    Array.from(pages).forEach(function(page){
        const title = page.firstElementChild.textContent;
        if( title.toLowerCase().indexOf(term) != -1) {
            book.style.display = "block";
        }   else {
            book.style.display = "none";
        }

    });
});

这是我的HTML / PUG

doctype html 
html( lang="en" )
    head
        link( rel="stylesheet" type="text/css" href="./css/style.css" )
        link( rel="stylesheet" type="text/css" href="./css/animation.css" )
        link( href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Ubuntu" rel="stylesheet" )

        title Nymadic #{title}

body
    section( id="navWrapper" )
        div( id="logoBox" ) 
            img( id="logo" src="img/Nymadic_Logo_Edit_NEW.png" onclick="location='/'" )
    section( id="navMenuWrapper" )
        ul( id="navMenu" )
            li( id="wikiNav" ) #[div() Wiki]
            li( id="toolsNav" ) Tools
            if !currentUser
                li( id="loginNav" onclick="location='/login'" ) Login
            else 
                li( id="profileNav" onclick="location='/profile'" ) Profile
                li( id="logoutNav" onclick="location='/logout'" ) Logout
    section( id="sideBar" )
        // div(id="alien") Nymadic
        form
            input( id="wikiSearch" type="text" name="wikiSearch" placeholder="Search for Knowledge..." )
        ul( id="wikiList" )
                li( v-for="page in mediaList" v-bind:key="page.title" v-bind:name="page.title" ) 
                    p( class="listPageTitle" ) {{ page.title }}
                    div( id="descriptionWrapper" )
                        p( class="listPageDescription") {{ page.description }}
                            p( v-if="page.author" class="listPageAuthor") Created By: {{ page.author }}
    section( id="contentWrapper" )
        block content


    script( src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" )
    script( src="./js/scripts.js" 

)

Answer 1

尝试在onkeyup上使用input( id="wikiSearch" type="text" name="wikiSearch" placeholder="Search for Knowledge..." )

类似于input (onkeyup="yourJavascriptFunction()")

此外，请尝试仅在javascript上设置类似init的函数，然后在html / pug的开始处调用它，以确保路径正确。

如果要使用eventListener，请尝试使用console.log(wikiSearch)并检查是否返回了某些内容。

希望有帮助。：）

事件侦听器未在Keyup上运行该函数

1 个答案: