因此，每次我在其中键入电影时，都会出现我不知道该怎么做的一切
// Get input element
let filterInput = document.getElementById('filterInput');
// Add event listener
filterInput.addEventListener('keyup', filterNames);
function filterNames(){
// Get value of input
let filterValue = document.getElementById('filterInput').value.toUpperCase();
// Get names ul
let ul = document.getElementById('names');
// Get lis from ul
let li = ul.querySelectorAll('li.collection-item');
// Loop through collection-item lis
for(let i = 0;i < li.length;i++){
let a = li[i].getElementsByTagName('a')[0];
// If matched
if(a.innerHTML.toUpperCase().indexOf(filterValue) > -1){
li[i].style.display = '';
} else {
li[i].style.display = 'none';
}
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css">
<title>NinjaWolf Movie Review</title>
</head>
<body>
<div class="container">
<h1 class="center-align">
Movies Watched
</h1>
<h4 class="center-align">
*Spoiler Warning*
</h4>
<input type="text" id="filterinput" placeholder="Search Movie">
<ul id="names" class="collection with-header">
<li class="collection-header">
<h5>2019</h5>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/ARMY%20of%20DARKNESS.html">ARMY OF DARKNESS</a>
</li>
<li class="collection-item">
<a href="file:///Volumes/MEMOREX%20USB/Website/Movie%20Review/Movies/THE%20CLOVERFIELD%20PARADOX.html">THE CLOVERFIELD PARADOX</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/CLOVERFIELD.html">CLOVERFIELD (2008)</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/INSIDIOUS%20CHAPTER%202.html">INSIDIOUS: CHAPTER 2</a>
</li>
<li class="collection-item">
<a href="file:///Volumes/MEMOREX%20USB/Website/Movie%20Review/Movies/INSIDIOUS.html">INSIDIOUS</a>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/TERMINATOR%20DARK%20FATE.html">TERMINATOR: DARK FATE (2019)</a>
</li>
<li class="collection-header">
<h5>November</h5>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/Evil%20Dead%202(1987).html">EVIL DEAD II</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/TRANSFORMERS.html">TRANSFORMERS</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/JOKER.html">JOKER</a>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/INDEPENDENCE%20DAY.html">INDEPENDENCE DAY</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/MISSION%20IMPOSSIBLE%20FALLOUT.html">MISSION: IMPOSSIBLE FALLOUT M:I-6</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/BLACK%20MIRROR.html">BLACK MIRROR (2011 - )
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/LION%20KING%20(2019).html">THE LION KING(2019)</a>
</li>
<li class="collection-item">
<a href="file://D:/Website/Movie%20Review/Movies/TERMINATOR%202.html">TERMINATOR 2: JUDGEMENT DAY</a>
<li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/MISSION%20IMPOSSIBLE%20ROUGE%20NATION.html">MISSION: IMPOSSIBLE ROUGE NATION M:I-5</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/MISSION%20IMPOSSIBLE%20GHOST%20PROTOCOL.html">MISSION: IMPOSSIBLE GHOST PROTOCOL M:I-4</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/DADDYS%20HOME%202.html">DADDY'S HOME 2</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/HAPPY%20DEATH%20DAY%202%20U.html">HAPPY DEATH DAY 2 U</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/DADDYS%20HOME.html">DADDY'S HOME</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/Happy%20Death%20Day.html">HAPPY DEATH DAY</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/THE%20MAZE%20RUNNER.html">THE MAZE RUNNER</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/ASSASSINS%20CREED.html">ASSASSIN'S CREED</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/Galaxy%20Quest.html">Galaxy Quest(1999)</a>
</li>
<li class="collection-header">
<h5>October</h5>
</li>
<li class="collection-item">
<a href="file:///Volumes/MEMOREX%20USB/Website/Movie%20Review/Movies/Goosebumps%202.html">Goosebumps 2(2018)</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/EvilDead(1981).html">THE EVIL DEAD(1981)</a>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/EvilDead.html">EVIL DEAD(2013)</a></li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/LOVE%20DEATH+ROBOTS.html">LOVE DEATH + ROBOTS(2018)</a>
</li>
<li class="collection-header">
<h5>September</h5>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/MAMMA%20MIA!.html">MAMMA MIA</a>
<li class="collection-header">
<h5>2018</h5>
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/ANON.html">ANON(2018)</a>
</li>
</ul>
<br/>
</div>
<div class="card">
<h2>Stranger Things (Season 3)</h2>
<h4>July 17, 2019 - July 18, 2019, Stranger Things (Season 3) is about In the summer of 1985 in Hawkins, the new Starcourt Mall has become the focal point of the town, driving other stores out of business. Sheriff Jim Hopper is conflicted over Eleven and Mike's budding relationship, while Joyce considers moving out of Hawkins for better prospects, leaving the state of the children's friendships and her relationship with Hopper in the air. However, strange power fluctuations trigger Will's awareness of something otherworldly, and Eleven and Max sense something is off about the town's residents, and despite having closed the portal to the Upside Down, fears that they are all in danger from it still.</h4>
<div class="img-wrapper">
<img src="./img/ST3.png" alt="ST3">
<p>I watched Stranger Things(Season 3) on July, 17, 2019 and I loved it and Stranger Things Season 3 had an upgrade because they went into the Gorrer selection and when they cut her leg open I just couldn't watch and I know hooper is still alive and remember that scene where Steve knocks that Russian out if that was me I would have said <b>"Fuck Mother Russia"</b> and Fun Fact I always watch Stranger Things (Season 3) with my Dad and my Brother got interested in Stranger Things when Season 2 came out and my Sister said we should watch it all together but my Brother said "No Way" and watched it without us and so while we watched Stranger Things (Season 3) he was playing Apex Legends I finished it on July 18, 2019, <p>
<br> <br/>
</div>
</div>
<div class="card">
<h2>RWBY: Volume 2 (2014)</h2>
<h4>July 4, 2019, RWBY: Volume 2 is about Team RWBY begins their second semester and try to take down a crime syndicate, a task that mabye far too difficult</h4>
<img src="./img/RWBY.jpg" alt="RWBY">
<p>I watched RWBY: Volume 2 on July, 4, 2019, I loved it because it introduced alot of new characters to RWBY and a lot of backstory even though my big brother hates the animation and I love it I cant wait to watch more RWBY</p>
<br/>
</div>
<div class="card">
<h2>Spider-Man: Far from Home(2019)</h2>
<h4>June 4, 2019, Spider-Man: Far From Home is Following the events of Avengers: Endgame (2019), Spider-Man must step up to take on new threats in a world that changed forever.</h4>
<img src="Spider-Man.jpg" alt="Spider-Man: Far from Home">
<p>I watched on July 2, 2019, my Big Brother took me and my sister to Spider-Man: Far from Home as a surprise and was a great a movie and my Brother Neil thought Mysterio was great. But then the credits ruined it the whole revealing identity. what is a head-scratcher is there were only a couple of people because it was the day it comes into theaters. and in the quote of Neil "The comics after Civil War where horrible" and my Dad always told me <b>"Joshua one of these days MARVEL
will have a downfall and decrease"</b> after thinking out it I think the day has come where MARVEL has failed</p>
<br/>
</div>
<h2>RWBY: Volume 1(2013)</h2>
<h4>June 16, 2019, RWBY is about In the land of Remnant, where boys and girls train to become huntsman and huntresses, 4 color-coded Teenage girls form who Team RWBY and train to fight crime and monsters known as the Grimm, team up to fight the mysterious shadow organization in this action-packed animated series from Rooster Teeth.</h4>
<div class="image-wrapper">
<img src="RWBY.png" alt="RWBY">
</div>
<p>I watched RWBY: Volume 1 on June 14, 2019, it was an Amazing Movie or Tv Show cause I thought it was a Movie but in actuality it was a TV Show ever episode combined into a movie and I originally got into the TV Show because I would listen to the soundtrack on Pandora and then I decided that since it was on Amazon Prime I would watch it and that the category: American animated series</p>
<br/>
<div class="card">
<h2>Dragon Prince(2018)</h2>
<h4>June 10, 2019, Dragon Prince is about An extraordinary discovery inspires two human princes and an elven assassin to team up on an epic quest to bring peace to their warring lands.</h4>
<div class="image-wrapper">
<img src="http://www.nerdreport.com/wp-content/uploads/2019/02/MV5BZDkzYzZjMmItYmE1Ny00MzJkLWFkOGItOWRiNjA0M2RiOWY2XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg" alt="Dragon_Prince">
</div>
</div>
<p>I watched Dragon Prince on June 1, 2019, It was Amazing, Excellent, Stunning, Beautiful it was a TV Show. People recommended it to my sister we were laughing almost the entire time. And we were shocked to know the actor of Zuko(The Last Airbender) We loved it can't wait for the next episode</p>
<br/>
<div class="card">
<h2>Good Omens</h2>
<h4>June 2, 2019, Good Omens is a television serial based on the 1990 novel Good Omens: The Nice and Accurate Prophecies of Agnes Nutter, Witch by Terry Pratchett and Neil Gaiman. It's about A tale of the bungling of Armageddon features an angel, a demon, an eleven-year-old Antichrist, and a doom-saying witch.</h4>
<div class="image-wrapper">
<img src="https://i2.wp.com/www.geektown.co.uk/wp-content/uploads/2017/08/goodomens.jpg?zoom=2.625&y=850%2C370&ssl=1" alt="Good_Omens">
</div>
</div>
<p>I watched Good Omens on May 31, 2019, It's an amazing TV show we were laughing almost the whole time throughout the first Episode and the TV Show that Book is Based on is something I enjoy because they are making fun of Christianity.</p>
<br/>
<div class="card">
<h3>IT(2017)</h3>
<h5>May 3, 2019, IT retroactively as IT Chapter One)is a 2017 American supernatural horror film based on Stephen King's 1986 novel of the same name. Produced by New Line Cinema, RatPac-Dune Entertainment, KatzSmith Productions, Lin Pictures, Vertigo Entertainment, and distributed by Warner Bros. It is the second adaptation of the novel following Tommy Lee Wallace's 1990 miniseries, and a sequel is planned. The film tells the story of the summer of 1989 In the Town of Derry a group of bullied kids "The Losers Club" together to destroy a shape-shifting monster, which disguises itself as a clown and preys on the children of Derry, their small Maine town
</h5>
<div class="image-wrapper">
<img src="https://upload.wikimedia.org/wikipedia/en/5/5a/It_%282017%29_poster.jpg" alt="IT">
<p>I watched IT on May 3, 2019, an Holy Shit this scared me out of my skin and gave me chills down my spine and I was cussing almost the entire movie it scared the Living Shit out of me. I can't wait for Chapter 2 because it has James McAvoy
</div>
</div>
<div class="card">
<h3>TAG(2018)</h3>
<h5>April 29, 2019, Tag is a 2018 American comedy film directed by Jeff Tomsic(in his directorial debut)
and written by Rob McKittrick and Mark Steilen. The film is based on a true story that was published in The Wall Street Journal about a group of grown men played by Ed Helms, Jake Johnson, Hannibal Buress, Jon Hamm, Jeremy Renner, who spend one month a year playing a game of tag.
</h5>
<div class="image-wrapper">
<img src="https://image.tmdb.org/t/p/w500/eXXpuW2xaq5Aen9N5prFlARVIvr.jpg" alt="TAG" >
<p>I watched Tag on April 29, 2019, I watched Tag and OMG it was Terrific and
I imagine me all grown up and playing Tag with friends because I also love Tag.
I would give it 100% on Rotten Tomato and Me and Dad laughed almost the entire Movie</p>
</div>
</div>
<div class="card">
<h3>Avengers: Endgame(2019)</h3>
<h5>April 30, 2019, Avengers: Endgame takes place 22 or 21 days After the devastating events of Avengers: Infinity War(2018) the universe is in ruins.
With the help of remaining allies, the Avengers assemble once more to undo Thanos' actions and restore order to the universe.
It was filmed back to back with Avengers: Infinity War based on the Marvel Comics film was Directed by Anthony and Joe Russo and
Avengers: Endgame was widely anticipated, and Disney backed the film with extensive marketing campaigns. It also broke numerous box office records and has grossed over $1.4 billion worldwide,
becoming the highest-grossing film of 2019, as well as the eighth highest-grossing film of all time </h5>
<div class="image-wrapper">
<img src="https://cnet3.cbsistatic.com/img/xLgPeuq6CW9A2N2V2kKmhMT6h2o=/1092x0/2019/03/14/dd4d8d9c-5f16-4f6b-a7d8-65a00d095c2c/avengers-endgame-poster-square-crop.jpg" alt="AVENGERS_ENDGAME">
</div>
</div>
<p>I watched Avengers: Endgame on April 28, 2019, it was a masterpiece, me and my Dad, my Big Sister, my Big Brother all loved it we were laughing almost the entire Movie and 100% on Rotten Tomato.
and I loved the thought of them Time Traveling and the look on my Dads face was priceless when they time travled 2013
<br/>
</body>
</html>
答案 0 :(得分：1)
let filterInput = document.getElementById('filterInput');
...选择id值为filterInput的DOM中的第一个元素。不幸的是，您的标记中有0个元素带有该id值。您可能要使用
let filterInput = document.getElementById('filterinput');
^
将来，每当您获得意外结果时，请使用console.log()（或断点）查看变量中的内容。就您而言，
let filterInput = document.getElementById('filterInput');
console.log(filterInput);
...会立即发现问题所在。
欢迎使用StackOverflow！
看到它正常工作：
let filterInput = document.getElementById('filterinput');
filterInput.addEventListener('keyup', filterNames);
function filterNames() {
const filterValue = filterInput.value.toUpperCase();
const ul = document.getElementById('names');
const li = ul.querySelectorAll('li.collection-item');
for (let i = 0; i < li.length; i++) {
const a = li[i].getElementsByTagName('a')[0];
if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
li[i].style.display = '';
} else {
li[i].style.display = 'none';
}
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css" rel="stylesheet"/>
<div class="container">
<h1 class="center-align">
Movies Watched
</h1>
<h4 class="center-align">
*Spoiler Warning*
</h4>
<input type="text" id="filterinput" placeholder="Search Movie">
<ul id="names" class="collection with-header">
<li class="collection-header">
<h5>2019</h5>
</li>
<li class="collection-item">
<a href='#'>ARMY OF DARKNESS</a>
</li>
<li class="collection-item">
<a href='#'>THE CLOVERFIELD PARADOX</a>
</li>
<li class="collection-item">
<a href='#'>CLOVERFIELD (2008)</a>
</li>
<li class="collection-item">
<a href='#'>INSIDIOUS: CHAPTER 2</a>
</li>
<li class="collection-item">
<a href='#'>INSIDIOUS</a>
</li>
<li class="collection-item">
<a href='#'>TERMINATOR: DARK FATE (2019)</a>
</li>
<li class="collection-header">
<h5>November</h5>
</li>
<li class="collection-item">
<a href='#'>EVIL DEAD II</a>
</li>
<li class="collection-item">
<a href='#'>TRANSFORMERS</a>
</li>
<li class="collection-item">
<a href='#'>JOKER</a>
</li>
<li class="collection-item">
<a href='#'>INDEPENDENCE DAY</a>
</li>
<li class="collection-item">
<a href='#'>MISSION: IMPOSSIBLE FALLOUT M:I-6</a>
</li>
<li class="collection-item">
<a href='#'>BLACK MIRROR (2011 - )</a>
</li>
<li class="collection-item">
<a href='#'>THE LION KING(2019)</a>
</li>
<li class="collection-item">
<a href='#'>TERMINATOR 2: JUDGEMENT DAY</a>
</li>
<li class="collection-item">
<a href='#'>MISSION: IMPOSSIBLE ROUGE NATION M:I-5</a>
</li>
<li class="collection-item">
<a href='#'>MISSION: IMPOSSIBLE GHOST PROTOCOL M:I-4</a>
</li>
<li class="collection-item">
<a href='#'>DADDY'S HOME 2</a>
</li>
<li class="collection-item">
<a href='#'>HAPPY DEATH DAY 2 U</a>
</li>
<li class="collection-item">
<a href='#'>DADDY'S HOME</a>
</li>
<li class="collection-item">
<a href='#'>HAPPY DEATH DAY</a>
</li>
<li class="collection-item">
<a href='#'>THE MAZE RUNNER</a>
</li>
<li class="collection-item">
<a href='#'>ASSASSIN'S CREED</a>
</li>
<li class="collection-item">
<a href='#'>Galaxy Quest(1999)</a>
</li>
<li class="collection-header">
<h5>October</h5>
</li>
<li class="collection-item">
<a href='#'>Goosebumps 2(2018)</a>
</li>
<li class="collection-item">
<a href='#'>THE EVIL DEAD(1981)</a>
</li>
<li class="collection-item">
<a href='#'>EVIL DEAD(2013)</a></li>
<li class="collection-item">
<a href='#'>LOVE DEATH + ROBOTS(2018)</a>
</li>
<li class="collection-header">
<h5>September</h5>
</li>
<li class="collection-item">
<a href='#'>MAMMA MIA</a>
</li>
<li class="collection-header">
<h5>2018</h5>
</li>
<li class="collection-item">
<a href='#'>ANON(2018)</a>
</li>
</ul>
</div>