Can anyone please tell me why my tabs aren't working?
it's happening the same with the navigation bar dropdown button.
<div class="col-12">
<h2>Corporate Leadership</h2>
<ul class = "nav nav-tabs">
<li class = "nav-item">
<a class = "nav-link active" href = "#peter" role = "tab" data-toggle = "tab">Peter Pan, CEO</a>
</li>
<li class = "nav-item">
<a class = "nav-link active" href = "#witherspoon" role = "tab" data-toggle = "tab">Dhanasekaran Witherspoon, CFO</a>
</li>
<li class = "nav-item">
<a class = "nav-link active" href = "#tang" role = "tab" data-toggle = "tab">Agumbe Tang, Chief Taste Officer</a>
</li>
<li class = "nav-item">
<a class = "nav-link active" href = "#alberto" role = "tab" data-toggle = "tab">Alberto Somayya, Executive Chef</a>
</li>
</ul>
<div class = "tab-content">
<div role = "tabpanel" class = "tab-pane fade show active" id = "peter">
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.</p>
</div>
<div role = "tabpanel" class = "tab-pane fade" id = "witherspoon">
<h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
<p class="d-none d-sm-block">Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays, pays!</em></p>
</div>
<div role = "tabpanel" class = "tab-pane fade" id = "tang">
<h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
<p class="d-none d-sm-block">Blessed with the most discerning gustatory sense, Agumbe, our CTO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, <em>You click only if you survive my lick.</em></p>
</div>
<div role = "tabpanel" class = "tab-pane fade" id = "alberto">
<h3>Alberto Somayya <small>Executive Chef</small></h3>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, <em>Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!</em></p>
</div>
</div>
</div>
please ignore the line below stackoverflow wasn't allowing me to post the question...
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJdddddddddddddddddddddddddddoooooooooooooooooooooooooooooooooooooooooooooooooooooooowwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwddddddddddddddddddddddddddddddddddddd
What and how exactly is "not working"?
In react you have to use "className" attribute intstead of "class".
Related
In the above exercise, I have a working v-for loop that prints all of the JSON objects in my JSON file, I am trying to only print the first object instead of the whole list... is there a way?
I could not find an answer on google
here is my code:
<template>
<div class="exespotbody">
<div class="grid">
<a v-for="(news,key,index) in news " v-bind:key="news" href="" class="module" style="display:flex;text-decoration:none;color:#14a0fd;">
<div>
<img src="https://fintechapp.s3.us-east-2.amazonaws.com/y2qYjf8e2hp8z5yrgyfxF2NN?response-content-disposition=inline%3B%20filename%3D%22BoxLogo.png%22%3B%20filename%2A%3DUTF-8%27%27BoxLogo.png&response-content-type=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJG6DG75G7BXQ3XUA%2F20210115%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20210115T192217Z&X-Amz-Expires=518400&X-Amz-SignedHeaders=host&X-Amz-Signature=26b742c676a7fc0854c1efa0c81bf60e9239bc5068606262b3b1eab0f7a21245">
<p> {{ news.description }} </p>
</div>
</a>
<!-- <a class="module" style="display:flex;text-decoration:none;color:#14a0fd; ">
<div>
<img style="height:auto ;width:220px;" src="https://filesforfintech.s3.amazonaws.com/images/pig+sauce/1+Go+to+conference.png">
<p> Events</p>
</div>
</a> -->
</div>
</div>
</template>
<script>
import newsData from "#/static/news.json"
export default {
data() {
return {
news: newsData,
}
}
}
</script>
is there a secrete I don't know?...
Json file structure example:
[{"id":4768,"url":"https://techcrunch.com/2021/01/06/indonesian-robo-advisor-app-bibit-raises-30-million-led-by-sequoia-capital-india/","user_id":48,"restype":"PersonalFinance","description":"Bibit, a Jakarta-based robo-advisor app that wants to make investing more accessible in Indonesia, has raised $30 million from Sequoia Capital India, with participation from returning investors East Ventures, EV Growth, AC Ventures and 500 Startups. – TechCrunch (Catherine Shu)","rating":3,"published_on":"2021-01-06","auth":"","folder":"wealthtech","created_at":"2021-01-07T01:25:41.870-07:00","updated_at":"2021-01-07T01:26:04.530-07:00","header":"Indonesian robo-advisor app Bibit raises $30 million led by Sequoia Capital India","publication":"TechCrunch","sector":"","sector2":"","sector3":"","company_id":2331,"tag_list":[],"company":{"name":"Bibit"}},{"id":4769,"url":"https://www.prnewswire.com/news-releases/leading-commercial-pc-insurance-software-provider-groundspeed-analytics-attracts-investment-from-global-investors-insight-partners-and-oak-hcft-301201761.html","user_id":48,"restype":"General","description":"Groundspeed Analytics, the Ann Arbor, Michigan-based commercial P\u0026C insurance software provider, has raised a Series C investment from Insight Partners with participation from existing investor Oak HC/FT. – PR Newswire","rating":1,"published_on":"2021-01-06","auth":"","folder":"insurtech","created_at":"2021-01-07T01:33:49.371-07:00","updated_at":"2021-01-07T01:34:26.301-07:00","header":"Leading Commercial P\u0026C Insurance Software Provider Groundspeed Analytics Attracts Investment from Global Investors Insight Partners and Oak HC/FT","publication":"PR Newswire","sector":"","sector2":"","sector3":"","company_id":2332,"tag_list":[],"company":{"name":"Groundspeed Analytics"}},{"id":4770,"url":"https://www.vccircle.com/ian-leads-pre-series-a-funding-in-fintech-startup-zerone/","user_id":48,"restype":"General","description":"Zerone Microsystems, a New Delhi-based provider of an app that converts any smartphone into a payment terminal, has raised $1.3 million in a pre-Series A round, led by Indian Angel Network (IAN) with participation from IAN Fund and The Chennai Angels (TCA). – VCCircle (Joseph Rai)","rating":3,"published_on":"2021-01-05","auth":"","folder":"payments","created_at":"2021-01-07T02:26:03.980-07:00","updated_at":"2021-01-07T02:26:21.340-07:00","header":"IAN leads pre-Series A funding in fintech startup Zerone","publication":"VCCircle (Joseph Rai)","sector":"","sector2":"","sector3":"","company_id":2333,"tag_list":[],"company":{"name":"Zerone Microsystems"}},{"id":4757,"url":"https://www.prnewswire.com/news-releases/color-announces-167-million-in-series-d-financing-to-help-build-public-health-infrastructure-across-the-us-301200310.html","user_id":48,"restype":"WealthTech","description":"Color, a San Francisco-based startup that is building public health technology and infrastructure for governments, employers, and other institutions that serve large populations, has raised a $167 million Series D financing round, led by General Catalyst and funds and accounts advised by T. Rowe Price Associates, Inc., with participation from Viking Global Investors and others, which brings Color to $278 million in total financing, with a valuation of $1.5 billion. – PR Newswire","rating":1,"published_on":"2021-01-05","auth":"","folder":"insurtech","created_at":"2021-01-05T02:39:51.724-07:00","updated_at":"2021-01-05T03:11:39.856-07:00","header":"Color announces $167 million in Series D financing to help build public health infrastructure across the U.S.","publication":"PR Newswire","sector":"","sector2":"","sector3":"","company_id":2321,"tag_list":[],"company":{"name":"Color"}},{"id":4762,"url":"https://www.uktech.news/news/ondato-funding-expansion-plans-20201231","user_id":null,"restype":"CyberIdentity","description":"Ondato, the Lithuanian identity verification company, has scored $2m in seed capital from Startup Wise Guys and OTB Ventures. The company will be moving its headquarters to London. – UKTN","rating":null,"published_on":"2021-01-05","auth":null,"folder":"regtech","created_at":"2021-01-05T22:25:57.091-07:00","updated_at":"2021-01-05T22:25:57.091-07:00","header":"This is the first tech startup that moved to London after Brexit","publication":"UKTN","sector":null,"sector2":null,"sector3":null,"company_id":1436,"tag_list":[],"company":{"name":"Ondat0"}},{"id":4755,"url":"https://www.prnewswire.com/news-releases/paid-network-raises-2m-in-funding-led-by-alphabit-fund-and-master-ventures-301200249.html","user_id":48,"restype":"Lending","description":"PAID Network, a Toronto-based startup building a decentralized SMART Agreement DApp powered by Polkadot, has closed a $2 million funding round led by Alphabit Fund \u0026 Master Ventures, with participation from A195, AU21, Brilliance Ventures, Phoenix VC, and X21. – PR Newswire","rating":2,"published_on":"2021-01-04","auth":"","folder":"blockchain","created_at":"2021-01-05T02:11:06.437-07:00","updated_at":"2021-01-05T02:11:51.658-07:00","header":"PAID Network Raises $2M in Funding Led by Alphabit Fund and Master Ventures","publication":"PR Newswire","sector":"","sector2":"","sector3":"","company_id":2319,"tag_list":[],"company":{"name":"PAID Network"}}, ... etc
Result:
So as per you data structure your code should be something like
<template>
<div class="exespotbody">
<div class="grid">
<!-- Block to print the whole newsList -->
<a v-for="(news,index) in newsList" v-bind:key="news.id" href="" class="module" style="display:flex;text-decoration:none;color:#14a0fd;"> // Change added in v-for
<div>
<img src="https://fintechapp.s3.us-east-2.amazonaws.com/y2qYjf8e2hp8z5yrgyfxF2NN?response-content-disposition=inline%3B%20filename%3D%22BoxLogo.png%22%3B%20filename%2A%3DUTF-8%27%27BoxLogo.png&response-content-type=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJG6DG75G7BXQ3XUA%2F20210115%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20210115T192217Z&X-Amz-Expires=518400&X-Amz-SignedHeaders=host&X-Amz-Signature=26b742c676a7fc0854c1efa0c81bf60e9239bc5068606262b3b1eab0f7a21245">
<p> {{ news.description }} </p>
</div>
</a>
<!-- End of whole newsList -->
<!-- single news Block -->
<a v-bind:key="newsList[0].id" href="" class="module" style="display:flex;text-decoration:none;color:#14a0fd;"> // Change added in v-for
<div>
<img src="https://fintechapp.s3.us-east-2.amazonaws.com/y2qYjf8e2hp8z5yrgyfxF2NN?response-content-disposition=inline%3B%20filename%3D%22BoxLogo.png%22%3B%20filename%2A%3DUTF-8%27%27BoxLogo.png&response-content-type=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJG6DG75G7BXQ3XUA%2F20210115%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20210115T192217Z&X-Amz-Expires=518400&X-Amz-SignedHeaders=host&X-Amz-Signature=26b742c676a7fc0854c1efa0c81bf60e9239bc5068606262b3b1eab0f7a21245">
<p> {{ newsList[0].description }} </p>
</div>
</a>
<!-- End of single news Block -->
<!-- <a class="module" style="display:flex;text-decoration:none;color:#14a0fd; ">
<div>
<img style="height:auto ;width:220px;" src="https://filesforfintech.s3.amazonaws.com/images/pig+sauce/1+Go+to+conference.png">
<p> Events</p>
</div>
</a> -->
</div>
</div>
</template>
<script>
import newsData from "#/static/news.json"
export default {
data() {
return {
newsList: newsData, // change added - to avoid ambiguity in v-for
}
}
}
</script>
Since your data structure is an array of objects in v-for while iterating you wont be able to key since its an array thats the reason why I have removed the key.
So Every Time I type a movie in it dosent show up which it should I dont know what to Ive tried everything
// 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">
ARMY OF DARKNESS
</li>
<li class="collection-item">
THE CLOVERFIELD PARADOX
</li>
<li class="collection-item">
CLOVERFIELD (2008)
</li>
<li class="collection-item">
INSIDIOUS: CHAPTER 2
</li>
<li class="collection-item">
INSIDIOUS
<li class="collection-item">
TERMINATOR: DARK FATE (2019)
</li>
<li class="collection-header">
<h5>November</h5>
</li>
<li class="collection-item">
EVIL DEAD II
</li>
<li class="collection-item">
TRANSFORMERS
</li>
<li class="collection-item">
JOKER
<li class="collection-item">
INDEPENDENCE DAY
</li>
<li class="collection-item">
MISSION: IMPOSSIBLE FALLOUT M:I-6
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/BLACK%20MIRROR.html">BLACK MIRROR (2011 - )
</li>
<li class="collection-item">
THE LION KING(2019)
</li>
<li class="collection-item">
TERMINATOR 2: JUDGEMENT DAY
<li>
<li class="collection-item">
MISSION: IMPOSSIBLE ROUGE NATION M:I-5
</li>
<li class="collection-item">
MISSION: IMPOSSIBLE GHOST PROTOCOL M:I-4
</li>
<li class="collection-item">
DADDY'S HOME 2
</li>
<li class="collection-item">
HAPPY DEATH DAY 2 U
</li>
<li class="collection-item">
DADDY'S HOME
</li>
<li class="collection-item">
HAPPY DEATH DAY
</li>
<li class="collection-item">
THE MAZE RUNNER
</li>
<li class="collection-item">
ASSASSIN'S CREED
</li>
<li class="collection-item">
Galaxy Quest(1999)
</li>
<li class="collection-header">
<h5>October</h5>
</li>
<li class="collection-item">
Goosebumps 2(2018)
</li>
<li class="collection-item">
THE EVIL DEAD(1981)
</li>
<li class="collection-item">
EVIL DEAD(2013)</li>
<li class="collection-item">
LOVE DEATH + ROBOTS(2018)
</li>
<li class="collection-header">
<h5>September</h5>
</li>
<li class="collection-item">
MAMMA MIA
<li class="collection-header">
<h5>2018</h5>
</li>
<li class="collection-item">
ANON(2018)
</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>
let filterInput = document.getElementById('filterInput');
... selects the first element in DOM with an id value of filterInput. Unfortunately, you have 0 elements in your markup with that id value. You probably want to use
let filterInput = document.getElementById('filterinput');
^
In the future, whenever you're getting unexpected results, use a console.log() (or a breakpoint) to look at what's inside your variables. In your case,
let filterInput = document.getElementById('filterInput');
console.log(filterInput);
... would have immediately revealed the problem.
Welcome to StackOverflow!
See it working:
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>
and thank you in advance for taking a minute of your valuable time to solve this puzzle and educate me on the topic.
(please forgive my terminology)
I am using the following code in iMacros for Firefox to select an element on the site, which works fine, as long as the element exists and is in the same order.
TAG XPATH=".//*[#id='contacts']/ul/li[1]/div/ul/li[1]" EXTRACT=TXT
Which in this case would result in "New York, NY"
From:
<div id="contacts" class="article expanding_group">
<div class="article-header">
<!-- Public Company = Block. Public Name/Title = Restricted. -->
<ul class="list">
<li class="list_item">
<div class="list_item_content contact-detail">
<div class="edit expanded">
<ul>
<li class="name"> New York, NY </li>
<li class=" ellipsis">
http://www.a24films.com
</li>
<li class="info ">
+1 646 568 6015
<span class="attributes">phone</span>
</li>
<li class="info ellipsis">
info#a24films.com
</li>
<li class="address ">601 West 26th Street</li>
<li class="address ">Suite 1740</li>
<li class="address "> New York, NY 10001 </li>
<li class="address ">USA</li>
<li class="address ">
</ul>
</div>
However, if the field is missing, it will skip to the next field which will, in essence, result in data being inserted into the incorrect row.
E.g. if I am expecting columns "name, phone, address", and it is missing phone, it will result in "name, address, blank".
I can see it I want only when list item 1's class="name", so my question is: is there a way to specify that I want the list item number 1 that contains "name" in class?
I have tried a variation of strings to no avail, but I woulf imaging something like this is possible:
TAG XPATH=".//*[#id='contacts']/ul/li[1]/div/ul/li[1]/name" EXTRACT=TXT
Thank you for your time,
Reinaldo
You can try the following code:
TAG XPATH=".//*[#id='contacts']/ul/li[1]/div/ul/li[#class='name'][1]" EXTRACT=TXT
Try this Xpath:
.//*[#id='contacts']//li[#class='name'][1]
I don't think #Shugar's code will work.
So, I'm starting to create a homepage for my homework, but I've stumbled upon a problem.
Basically, what I need my homepage to display is this kind of text: "Daudzspēlētāju tiešsaites lomu spēle (Massively Multiplayer Online Role-Playing Game), vai vienkārši MMORPG (angļu saīsinājums) ir spēles žanrs, kas sastāv no spēlēšanas internetā ar citiem spēlētājiem radītā vai īstā virtuālā pasaulē."
And this is what I'm getting: "DaudzspÄ“lÄ“tÄju tieÅ¡saites lomu spÄ“le (Massively Multiplayer Online Role-Playing Game), vai vienkÄrÅ¡i MMORPG (angļu saÄ«sinÄjums) ir spÄ“les žanrs, kas sastÄv no spÄ“lÄ“Å¡anas internetÄ ar citiem spÄ“lÄ“tÄjiem radÄ«tÄ vai Ä«stÄ virtuÄlÄ pasaulÄ“."
This is what I currently have, and thank you for the help:
<!DOCTYPE html>
<html>
<head>
<title> Sākums </title>
<link rel="SHORTCUT ICON" href="./bildes/favicon.ico"/>
<script src="./js/jquery2.1.4.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link href = "./css/bootstrap.min.css" rel = "stylesheet">
<link rel="stylesheet" type="text/css" href="./stils.css">
</head>
<body>
<div class = "navbar navbar-inverse navbar-static-top">
<div class = "container">
<li> MMO/MMORPG </li>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class = "active">
<li>Sākums</li>
<li>Anketa</li>
<li>Galerija</li>
<li>Kontakti</li>
</li>
</ul>
</div>
</div>
</div>
<div class = "container">
<div class = "jumbotron">
<center> <h1> Kas ir MMO/MMORPG </h1>
<p>Daudzspēlētāju tiešsaites lomu spēle (Massively Multiplayer Online Role-Playing Game), vai vienkārši MMORPG (angļu saīsinājums) ir spēles žanrs, kas sastāv no spēlēšanas internetā ar citiem spēlētājiem radītā vai īstā virtuālā pasaulē. MMORPG ir izplatītākais MMO (massive multiplayer online) tipa spēļu paveids. Vēl eksistē MMOFPS (MMO first person shooter) un MMORTS (MMO real time strategy), bet šāda veida spēlēm ir lielākas prasības pret tīklu un servera resursiem, tāpēc tās ir mazāk izplatītas. Tās arī parādījās vēlāk. MMORPG no citiem tīkla RPG atšķiras ar to, ka serveri parasti uztur spēles izstrādātājkompānija, serverī vienlaikus var spēlēt ļoti liels spēlētāju skaits (vairāki tūkstoši) un par spēles spēlēšanu, ar retiem izņēmumiem, ir jāmaksā mēneša maksa. Tāpat kā citās RPG spēlēs, te viens no mērķiem ir līmeņa sišana. MMORPG ir iespējami uzdevumi (angļu: quest), taču tie nevar izmainīt spēles pasauli, atšķirībā no kvestiem parastajos RPG. </p>
</div>
You're missing a charset. Ideally this should be sent by the server in the Content-Type HTTP header, but you should also have it in the HTML itself:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
(to be added in your <head>)
I have two div inside container and those divs should be settled according to the width of container and there should be a proper space between them
<div id="testimonial-wrapper">
<div class="container">
<ul class="inline-section row">
<li class="signature-interior-features green-background col-sm-5 col-md-5">
<div class="signature-interior-content">
<h2>Signature Interior Features</h2>
<ul>
<li>Full-sized washer and dryer in every home</li>
<li>Walk-in closets and walk-in pantries and
vaulted ceilings available*</li>
<li>Appliance packages with multi-cycle dishwasher,
range and frost-free refrigerators</li>
<li>Large stainless steel sinks with disposal</li>
<li>Linen closets</li>
<li>Cozy wood-burning fireplace in every home</li>
<li>Spacious patios with exterior storage</li>
<li>Individual hot water heaters</li>
<li>Electric HeatM</li>
<li>Pre-wired for phone, cable and high-speed Internet access</li>
<li>Interior packages available*</li>
</ul>
</div><!--signature-interior-content-closed-->
</li>
<li class="community-elements-details sky-background col-sm-5 col-md-5">
<div class="community-elements-content">
<h2>Community Elements</h2>
<ul>
<li>Clubhouse with social room and kitchen</li>
<li>Athletic center with cardio equipment and free weights</li>
<li>Sparkling outdoor swimming pool</li>
<li>Invigorating indoor spa</li>
<li>Complimentary tanning studio</li>
<li>Sports court</li>
<li>Close proximity to the Sounder commuter train and
the Super Mall</li>
<li>Only minutes to Emerald Downs and I-5 with
easy access to Highway 167 and Highway 18</li>
<li>Professional on-site maintenance</li>
<li>Professional on-site management
*in select apartment home</li>
</ul>
</div><!--community-elements-content-closed-->
</li>
</ul>
</div><!--container-closed-->
</div><!--testimonial-wrapper-closed-->