Modal will not open on click - javascript

I am in a javascript beginner class and I am stuck with my homework. I went over it what feels like a million times but for some reason, I am missing something and I can't find it. Many thanks in advance!!! It is set up so that if the link has the data-reveal attribute and there is a modal element with the matching ID it will allow for that link to be clicked and the modal appears.
My HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0, shrink-to-fit=no">
<meta name="description" content="description">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>London</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="stylesheet" type="text/css" href="styles/london.css">
</head>
<!-- Head End -->
<body>
<header id="header" class="header">
<!-- Image Banner -->
<div id="logoWrapper" class="logoWrapper">
<img src="images/welcometoengland.png" class="logo" title="Welcome to England" alt="Welcome to England">
</div>
<section id="banner" class="banner">
<img src="images/banner/london_banner_1.png" class="banner__image" alt="banner">
</section>
<!-- Primary navigation -->
<nav id="nav" class="nav">
<ul class="nav__links nav__items">
<li class="nav__item">
Home
</li>
<li class="nav__item">
London
</li>
<li class="nav__item">
Daytrips
</li>
<li class="nav__item">
Cost
</li>
<li class="nav__item">
Stay
</li>
<li class="nav__item">
Travel
</li>
<li class="nav__item">
Shop
</li>
<li class="nav__item">
Contact Us
</li>
</ul>
</nav>
</header>
<!-- Header End -->
<main id="main" class="main">
<!--Left Content -->
<div id="main__content" class="main__content">
<div class="intro__wrapper">
<div class="intro__left">
<h4 id="attractionLinks__heading" class="attractionLinks__heading"></h4>
<ul id="attractionLinks__list" class="attractionLinks__list"></ul>
<p class="attractionLinks__instructions">If you have already visited some attractions or would like to add additional attractions, click the button below to update your preferences:</p>
<button id="attractionLinks__showForm" class="attractionLinks__showForm">Select Attractions</button>
</div>
<div class="intro__right">
<h3 class="intro__heading">Welcome to the Lodon Attractions page!</h3>
<p class="intro__text"> As a current memeber of the International Travel Club, you may select the attractions you would like to visit and we will keeo you updated with travel tips. When you click the London tab, you will only see links to attractions you would like to visit.</p>
<div class="form__inputWrapper">
<form class="form travelerForm" id="travelerForm" name="travelerForm">
<div class="form__inputWrapper">
<label for="fullName" class="form__label">Full Name:</label>
<input name="fullName" id="fullName" class="form__input" type="text" pattern="^[A-Za-z]+\s[A-Za-z]+$" placeholder="" required>
</div>
<div class="form__inputWrapper form__inputWrapper--checkboxes">
</div>
<!--Submit-->
<div class="form__inputWrapper form__inputWrapper--submit">
<input name="submitTraveler" id="submitTraveler" class="submit button" type="submit" value="Submit Form">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Right Sidebar -->
<div id="main__sidebar" class="main__sidebar">
<!--London Clock-->
<div id="londonTime__wrapper" class="londonTime__wrapper">
<img class="londonTime__image" src="images/bigben.png" alt="Big Ben Clock">
<p id="londonTime" class="londonTime"></p>
</div>
<!--Attractions Select Wrapper-->
<div id="attractions" class="attractions">
<div class="attractions__instructionsWrapper">
<!--Attractions Instructions-->
<h2 class="attractions__heading">
Select an item from the list to display a picture and description of the attraction.
</h2>
</div>
<!--Attractions Select Wrapper-->
<div class="attractions__selectWrapper">
<select id="attractions__list" class="attractions__list">
</select>
</div>
<!--Attractions Display Wrapper-->
<div class="attractions__displayWrapper">
<div class="attractions__imageWrapper">
<img src="images/slideshow/placeholder.jpg" class="attractions__image" alt="Attractions">
</div>
</div>
<!--Attractions Text Wrapper-->
<div class="attractions__textWrapper">
<p class="attractions__text"></p>
</div>
</div>
<!--Attractions End-->
</div>
<section class="modals">
<!--Big Ben Modal-->
<div id="BigBen_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Big Ben</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/BigBen.jpg" alt="Big Ben">
</div>
<div class="modal__textWrapper">
<p class="modal__text">Whenever you think of London, you probably think of Big Ben, as it is one of England's most recognized landmarks.</p>
<p class="modal__text">Here are some <em>Quick Facts</em> about Big Ben:</p>
<p class="modal__text">Description: Big Ben is not actually the clock tower. It is the largest of the five bells inside of the clock tower</p>
<p class="modal__text">Location: It is at the House of Parliament in Westminster, London</p>
<p class="modal__text">Constructed; Completed in 1856, it took 13 years to build. It is about 315 feet high and hs 400 steps to reach the top</p>
<p class="modal__text">Tourists: Bet you didn't know that foreign tourists are not allowed to climb the 400 steps to the top of the tower, but native Englanders can arrange a tour through a member of parliament or a Lord. Please note that it is not wheelchair accessible.</p>
<p class="modal__text">Cost: Free</p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Zoo Modal-->
<div id="LondonZoo_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Zoo</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/londonzoo.jpg" alt="London Zoo">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--St. Paul's Cathedral Modal-->
<div id="StPaulsCathedral_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">St. Paul's Cathedral</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/StPaulsCathedral.jpg" alt="St. Paul's Cathedral">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Tower of London Modal-->
<div id="TowerofLondon_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Tower of London</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/toweroflondon.jpg" alt="Tower of London">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--British Museum Modal-->
<div id="BritishMuseum_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">British Museum</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/BritishMusuem.jpg" alt="British Museum">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Eye Modal-->
<div id="LondonEye_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Eye</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/londoneye.jpeg" alt="London Eye">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--London Aquarium Modal-->
<div id="LondonAquarium_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">London Aquarium</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/London Aquarium.jpg" alt="London Aquarium">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Westminster Abbey Modal-->
<div id="WestminsterAbbey_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Westminster Abbey</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/WestminsterAbbey.jpg" alt="Westminster Abbey">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Thames River Cruise Modal-->
<div id="ThamesRiverCruise_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Thames River Cruise</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/ThamesRiverCruise.jpg" alt="Thames River Cruise">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Wellington Arch Modal-->
<div id="WillingtonArch_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Wellington Arch</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/WellingtonArch.jpg" alt="Wellington Arch">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Harrods Modal-->
<div id="Harrods_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Harrods</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/Harrods.jpg" alt="Harrods">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
<!--Shopping Modal-->
<div id="Shopping_modal" class="modal">
<div class="modal__innerWrapper">
<div class="modal__content">
<h3 class="modal__heading">Shopping</h3>
<div class="modal__imageWrapper">
<img class="modal__image" src="images/Shopping.jpg" alt="Shopping">
</div>
<div class="modal__textWrapper">
<p class="modal__text"></p>
<p class="modal__text --textCenter">Content from respective websites - For learning purposes only</p>
</div>
<p class="modal__close" aria-label="Close modal" role="button">
<span aria-hidden="true">×</span>
</p>
</div>
</div>
</div> <!--End of Modal-->
</section>
</main>
<!-- Main End -->
<footer id="footer" class="footer"></footer>
<!--Footer End -->
<script src="scripts/cookies.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/select_list.js"></script>
<script src="scripts/banner.js"></script>
<script src="scripts/london.js"></script>
<script>displayLondonTime();</script>
</body>
</html>
Here is my Javascript:
const LondonAttractions = {
LondonZoo: "London Zoo",
BigBen: "Big Ben",
StPaulsCathedral: "St. Paul's Cathedral",
TowerofLondon: "Tower of London",
BritishMuseum: "British Museum",
LodonEye:"London Eye",
LondonAquarium: "London Aquarium",
WestminsterAbbey: "Westminster Abbey",
ThamesRiverCruise: "Thames River Cruise",
WellingtonArch: "Willington Arch",
Harrods: "Harrods",
Shopping: "Shopping"
};
const travelerForm = document.getElementById('travelerForm');
const travelerFormCheckboxWrapper = document.querySelector('#travelerForm .form__inputWrapper--checkboxes');
const attractionLinksHeading = document.getElementById('attractionLinks__heading');
const attractionLinksList = document.getElementById('attractionLinks__list');
const attractionLinksButton = document.getElementById('attractionLinks__showForm');
function generateCheckboxes() {
//If all the required parts exist
if(travelerForm && travelerFormCheckboxWrapper){
//For each daytrip in daytripsInfo
for(let key in LondonAttractions){
let checkbox = `
<div class="form__checkboxWrapper">
<label for="${key}" class="form__label">${LondonAttractions[key]}</label>
<input id="${key}" name="${key}" class="form__input" type="checkbox" placeholder="">
</div>
`;
travelerFormCheckboxWrapper.insertAdjacentHTML('beforeend', checkbox);
}//End of Foor Loop
} //End of if statement
} //End of function
generateCheckboxes();
if(travelerForm) {
travelerForm.addEventListener('submit', function(event) {
// Prevent the form from submitting
event.preventDefault();
var numChecked = 0;
const checkboxes = document.querySelectorAll('#travelerForm [type="checkbox"]');
// Loop over checkboxes
for(let i = 0; i < checkboxes.length; i++) {
// Check if the checkbox is checked
if(checkboxes[i].checked === true) {
// Increment numChecked variable
numChecked++;
//Set a cookie using the checkbox name
Cookies.set(checkboxes[i].name, true, {expires: 7});
}
//If a checkbox is not selected
else{
//If a cookie exists for that checkbox
if(Cookies.get(checkboxes[i].name)) {
//Delet the Cookie
Cookies.remove(checkboxes[i].name);
}
//Note: An alternative would be to set the cookie value to 'false'
//Cookies.set(checkboxes[i].name, false, { expires: 7});
}
}
if(numChecked > 0 && travelerForm.checkValidity()) {
Cookies.set('travelerName', travelerForm.fullName.value, { expires: 7});
// Submit the form
travelerForm.submit();
// Reset numChecked variable
numChecked = 0;
}
else if(numChecked === 0) {
alert('You must select at least one London attraction!');
}
});
}
//If both the 'travelerName' cookie and the attraction links heading exist
if(Cookies.get('travelerName') && attractionLinksHeading){
attractionLinksHeading.textContent = `Attraction Links for ${Cookies.get('travelerName')}`;
} else if(attractionLinksHeading) {
attractionLinksHeading.textContent = "Attraction Links";
}
if(attractionLinksList && travelerForm) {
//Show form by default
var showForm = true;
//For each of our attractions
for(let key in LondonAttractions) {
//If the cookie name esists
if(Cookies.get(key)) {
//Create our list item and link
let item = `<li class="attractionLinks__item">
<p data-reveal="${key}_modal" aria-controls="${key}" aria-haspopup="true" class="attractionLinks__link" role="button" tabindex="0">${LondonAttractions[key]}</p>
</li>`;
//Add the list item and link to the list
attractionLinksList.insertAdjacentHTML('beforeend', item);
//They have already submitted their preferences, hide from for now
showForm = false;
}
}
if(showForm === false) {
//Add modifier class that will be used to hide the form
travelerForm.classList.add('--hide');
}
const attractionLinks = document.querySelectorAll('.attractionLinks__link');
if(attractionLinks.length > 0) {
//If at least one link exists
for(let i = 0; i < attractionLinks.length; i++) {
//Get link data-reveal attribute
let id = attractionLinks[i].dataset.reveal;
//If the link has the data-reveal attribute, and there is a modal element with that matching ID
if(id && document.getElementById(id)) {
let modal = document.getElementById(id);
let closeButton = modal.querySelector('.modal__close');
//Add click event listner to link
attractionLinks[i].addEventListener('click', function(event) {
//If the modal exists and it does not have the --reveal class
if(!modal.classList.contains('--reval')) {
modal.classList.add('--reval');
}
});
//If close button exists within modal
if(closeButton) {
//Add click event listner to close button
closeButton.addEventListener('click', function(event) {
//If the modal had the --reveal class
if(modal.classList.contains('--reveal')) {
//Remove it (hides the modal)
modal.classList.remove('--reveal');
}
});
}
}
}
}
}
//If the button and the form both exist
if(attractionLinksButton && travelerForm) {
attractionLinksButton.addEventListener('click', function(event) {
//Check if the traveler form has the --hide class
if(travelerForm.classList.contains('--hide')) {
//Remove the --hide class
travelerForm.classList.remove('--hide');
//Add the --show class
travelerForm.classList.add('--show');
}
});
}

london.js -> Line 134 /* Problem */
If you add "--reveal" to the classList, that would make the class="initial --reveal"; //there is a space between initial and --reveal
Because on that line the css won't trigger
london.css -> line 82
To fix the problem:
//To solve the problem delete the line 134 from london.js and replace with
modal.className += '--reveal';

Related

Display no results message for input filtering a list of cards

I have an input field which is filtering a list of cards.
I can't seem to figure out how to display a message when all the div's are assigned the class display-none. Is their a way to check if any of the div's inside a parent div contain a class? Maybe I am approaching this incorrectly. Thanks for your help!
function mySearch() {
const input = document.getElementById("cardSearch").value.toUpperCase();
const cardContainer = document.getElementById("cards");
let cards = cardContainer.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
let noResults = document.getElementById("no-results");
let title = cards[i].querySelector(".card-content div.card-title");
if (title.innerText.toUpperCase().indexOf(input) > -1) {
cards[i].classList.remove("display-none");
cards[i].classList.add("displaying");
} else {
cards[i].classList.add("display-none");
cards[i].classList.remove("displaying");
checkDisplay();
}
}
function checkDisplay() {
let noResults = document.getElementById("no-results-message");
for (let i = 0; i < cards.length; i++) {
if (cards[i].classList.contains("displaying")) {
console.log("something");
} else {
console.log("no cards are displaying");
}
}
}
}
.display-none {
display: none;
}
.displaying {
display: block;
}
<div class="search-form" style="margin: 1.2em 0 1.2em 0">
<input onsearch="mySearch()" type="search" id="cardSearch" class="card-search" placeholder="Search for a service..." onkeyup="mySearch()">
</div>
<div class="card-container" id="cards">
<div class="no-results-message display-none" id="no-results">There are no results.</div>
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113953');">
<br>
</div>
<div class="card-content">
<div class="card-title">Abandoned Vehicle Complaint</div>
<div class="card-body">Report abandoned vehicles in unincorporated Pierce County.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i class="fa fa-chevron-down" style="font-size: 12px;" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Vehicle on Private Property</li>
<li>Vehicle on Public Property with a license plate</li>
<li>Vehicle on County roadway</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
<!-- -- end of container ---->
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113954');">
<br>
</div>
<div class="card-content">
<div class="card-title">Adopt-a-road Pick Up Request</div>
<div class="card-body">Request bag pick up or sign up for the adopt a road program.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i style="font-size: 12px;" class="fa fa-chevron-down" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Existing approved participant pick up</li>
<li>Apply for the adopt-a-road program</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
</div>
Changing display only with .display-none in css works more clearly
function mySearch() {
const input = document.getElementById("cardSearch").value.toUpperCase();
const cardContainer = document.getElementById("cards");
const cards = document.querySelectorAll(".card");
[...cards].map((card) => {
const noResults = document.getElementById("no-results");
const title = card
.querySelector(".card-content div.card-title")
.innerText.toUpperCase();
title.includes(input)
? card.classList.remove("display-none")
: card.classList.add("display-none");
checkDisplay();
});
function checkDisplay() {
const noResults = document.getElementById("no-results");
const result = [...cards].filter((card) =>
card.classList.contains("display-none")
);
cards.length === result.length
? noResults.classList.remove("display-none")
: noResults.classList.add("display-none");
for (let i = 0; i < cards.length; i++) {
if (cards[i].classList.contains("display-none")) {
console.log("no cards are displaying");
} else {
console.log("something");
}
}
}
}
.display-none {
display: none;
}
<div class="search-form" style="margin: 1.2em 0 1.2em 0">
<input onsearch="mySearch()" type="search" id="cardSearch" class="card-search" placeholder="Search for a service..." onkeyup="mySearch()">
</div>
<div class="card-container" id="cards">
<div class="no-results-message display-none" id="no-results">There are no results.</div>
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113953');">
<br>
</div>
<div class="card-content">
<div class="card-title">Abandoned Vehicle Complaint</div>
<div class="card-body">Report abandoned vehicles in unincorporated Pierce County.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i class="fa fa-chevron-down" style="font-size: 12px;" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Vehicle on Private Property</li>
<li>Vehicle on Public Property with a license plate</li>
<li>Vehicle on County roadway</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
<!-- -- end of container ---->
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113954');">
<br>
</div>
<div class="card-content">
<div class="card-title">Adopt-a-road Pick Up Request</div>
<div class="card-body">Request bag pick up or sign up for the adopt a road program.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i style="font-size: 12px;" class="fa fa-chevron-down" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Existing approved participant pick up</li>
<li>Apply for the adopt-a-road program</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
</div>

jQuery anchor links toggling a menu?

I used jQuery to make a toggle menu where someone can click on different span titles to toggle between different containers of content (on the website, this toggle menu toggles between different contact forms). The menu works, but I am trying to make it so that if a user clicks an anchor link on a different page, they will be sent to this page and the menu will automatically toggle to the corresponding container of content.
For example, if someone were to click on an anchor link like "mydomain.com/test-page/#third", I would want the content from the third menu item to toggle and show automatically when the page loads. I have been playing around with using "window.location.hash" to trigger a click event like this, but can't figure it out.
Is there a way to trigger a click event when the page url has a certain anchor hash like this at the end of it?
Would really appreciate any help folks can offer!
Here is the fiddle: https://jsfiddle.net/ecv5jwsr/
$(function() {
$('#toggle > span').click(function() {
var ix = $(this).index();
$('#left').toggle(ix === 0);
$('#second').toggle(ix === 1);
$('#third').toggle(ix === 2);
$('#four').toggle(ix === 3);
$("a[href='" + window.location.hash + "']").parent("#test").click();
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container text-center">
<!-- the toggler -->
<div class="row">
<div class="col-12">
<p id="toggle">
<span>TITLE 1</span>
<span>TITLE 2</span>
<span>TITLE 3</span>
<span>TITLE 4</span>
</p>
</div>
</div>
</div>
<!--container -->
<div class="container p-5 contact-page-forms">
<div class="row pl-md-5 pr-md-5">
<div class="col-12 pt-4">
<div id="left">
<h3>Content 1</h3>
</div>
<div id="second">
<h3>Content 2</h3>
</div>
<div id="third">
<h3>Content 3</h3>
</div>
<div id="four">
<h3>Content 4</h3>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
To do this you need to set tab id and save it in url as parameter like this:
$(function () {
let url = new URL(window.location);
let tab = (url.searchParams.get("tab") == null ? 'left' : url.searchParams.get("tab"));
url.searchParams.set('tab', tab);
history.pushState({}, null, url);
$(`.col-12.pt-4 div`).addClass('hide');
$(`.col-12.pt-4 #${tab}`).removeClass('hide');
$('#toggle > span').click(function () {
let tab = $(this).attr('for');
$(`.col-12.pt-4 div`).addClass('hide');
$(`.col-12.pt-4 #${tab}`).removeClass('hide');
let href = $(this).find('a').attr('href');
let url = new URL((href == '#' || href == '' ? window.location : href));
url.searchParams.set('tab', tab);
history.pushState({}, null, url);
//window.location.href = url;
});
});
.col-12.pt-4 .hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container text-center">
<!-- the toggler -->
<div class="row">
<div class="col-12">
<p id="toggle">
<span for="left">TITLE 1</span>
<span for="second">TITLE 2</span>
<span for="third">TITLE 3</span>
<span for="four">TITLE 4</span>
</p>
</div>
</div>
</div>
<!--container -->
<div class="container p-5 contact-page-forms">
<div class="row pl-md-5 pr-md-5">
<div class="col-12 pt-4">
<div id="left" class="hide">
<h3>Content 1</h3>
</div>
<div id="second" class="hide">
<h3>Content 2</h3>
</div>
<div id="third" class="hide">
<h3>Content 3</h3>
</div>
<div id="four" class="hide">
<h3>Content 4</h3>
</div>
</div>
</div>
</div>

JQuery - get the id values from an unknown number of children from a parent div

Im trying to get a list of ID values for each group of parent divs. Using draglua a site is dragged into a group, then I would like to create a dictionary string that I can submit to a server side form and process it.
That dictionary string should contain a list of all the ids within each group, my script below currently works for one group (A) but not all groups, im assuming there is a better approach to get all groups in one?
So after a user has dragged sites into groups I would like to be able to click apply groups then the the value of site_groups is set to
[{group: a, ids: [3,4,5]},{group: b, ids: [31,4]},{group: c, ids: [8]},..etc]
I can then submit this and process it server side, is anyone able to assist?
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.css"
integrity="sha256-iVhQxXOykHeL03K08zkxBGxDCLCuzRGGiTYf2FL6mLY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style type="text/css">
.drag-space {
width: 100%;
min-height: 20px;
}
</style>
</head>
<body>
<div class="container-scroller">
<div class="container-fluid page-body-wrapper">
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<!-- /.card -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<div class="d-flex flex-row justify-content-between">
<div><i class="fa fa-layer-group fa-fw"></i> Change Groups</div>
<div class="text-muted mb-1 small">
<a class="btn btn-sm btn-outline-primary" id="apply-tab" href="javascript:post();">Apply group changes</a>
</div>
</div>
</div>
<div class="card-body">
<form id="sitegroups_form" method="post">
<input type="text" id="site_groups" />
</form>
<div class="row">
<div class="col-3">
<h4>A - <small class="text-muted">1 Sites</small></h4>
<div id="drag-A" class="drag-space">
<div id="7">
Aberdeen
</div>
</div>
</div>
<div class="col-3">
<h4>B - <small class="text-muted">0 Sites</small></h4>
<div id="drag-B" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>C - <small class="text-muted">0 Sites</small></h4>
<div id="drag-C" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>D - <small class="text-muted">0 Sites</small></h4>
<div id="drag-D" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>E - <small class="text-muted">0 Sites</small></h4>
<div id="drag-E" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>F - <small class="text-muted">0 Sites</small></h4>
<div id="drag-F" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>G - <small class="text-muted">0 Sites</small></h4>
<div id="drag-G" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>H - <small class="text-muted">0 Sites</small></h4>
<div id="drag-H" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>I - <small class="text-muted">0 Sites</small></h4>
<div id="drag-I" class="drag-space">
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card">
<div class="card-header">
<i class="fa fa-layer-group fa-fw"></i> Sites not in change Groups
</div>
<div class="card-body">
<div class="row" id="drag-source">
<div id="8" class="col-3">
London
</div>
<div id="9" class="col-3">
New York
</div>
<div id="10" class="col-3">
Manchester
</div>
<div id="11" class="col-3">
Liverpool
</div>
<div id="12" class="col-3">
Edinburgh
</div>
<div id="13" class="col-3">
Tokyo
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"
integrity="sha256-rVf3H94DblhP4Z6wLSa2mpMwRS5qePBWykE6QWPOaO0=" crossorigin="anonymous"></script>
<script type="text/javascript">
// Begin Dragula JS
var drake = dragula([document.querySelector('#drag-source'), document.querySelector('#drag-A'), document.querySelector('#drag-B'), document.querySelector('#drag-C'), document.querySelector('#drag-D'), document.querySelector('#drag-E'), document.querySelector('#drag-F'), document.querySelector('#drag-G'), document.querySelector('#drag-H'), document.querySelector('#drag-I'),]);
// when item dropped
drake.on('drag', function (el,target,source,sibling) {
el.classList.remove('col-3');
})
// get the items within a group
$("#apply-tab").click(function(){
var a_children = document.querySelectorAll("#drag-A div");
var a_ids = []
for (var i = 0; i<a_children.length; i++) {
a_ids.push(a_children[i].id)
}
var group_a_ids = '{group: a, ids: ['+ a_ids +']}';
$("#site_groups").val(group_a_ids);
});
</script>
<!-- End custom js for this page-->
</body>
</html>
To anwser your question regarding the need to account for all groups at once (without taking care of the drag and drop part), you can take benefit of the HTML class drag-space, as follows:
$("#apply-tab").click(function(){
var group_ids = {};
$(".drag-space").each(function() { // Loop over all items of class 'drag-space'
var id = this.id;
var key = id.replace(/drag-/, "").toLowerCase();
var children = document.querySelectorAll("#" + id + " div");
var ids = []
for (var i = 0; i<children.length; i++) {
ids.push(children[i].id)
}
group_ids[key] = ids;
});
$("#site_groups").val(JSON.stringify(group_ids));
});

What is the effective way of setting up delete event listener using event delegation with JavaScript

I am trying to set up a delete event listener with event delegation. Here is the snippet.
document.getElementById('container').addEventListener('click', deleteProfile);
function deleteProfile(event){
//console.log(event.target);
const profileId = event.target.parentNode.parentNode.parentNode.parentNode.id;
if(profileId === 'profile-0')
{
//Delete the profile
console.log('profile deleted');
}
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div id="container">
<div id="profile-0">
<div id="heading">
<h3>Profile Tim</h3>
</div>
<div id="body">
<div id="profileInfo_details">
<figure>
<img src="https://via.placeholder.com/140">
</figure>
<label for="name">Name: </label>
<p id="name">Tim<p>
<label for="location">Location: </label>
<p id="location">Boston<p>
<button id="delete_profile" type="button">
<span class="glyphicon glyphicon-trash"></span> Delete profile
</button>
</div>
<div id="footer">
</div>
</div>
</div>
</div>
Given the fact that the image element inside the figure element is at the same DOM level as the button to delete the stuff, I get the message: "deleted profile" whenever I click on the image. How can I only get the message when I click on the button or span element?
So, look to see if what is clicked is the button. This really needs a class on it if there are more than one button in the element.
document.getElementById('container').addEventListener('click', deleteProfile);
function deleteProfile(event){
var button = event.target.closest("button");
if (button) {
event.preventDefault()
console.log('button')
}
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div id="container">
<div id="profile-0">
<div id="heading">
<h3>Profile Tim</h3>
</div>
<div id="body">
<div id="profileInfo_details">
<figure>
<img src="https://via.placeholder.com/140">
</figure>
<label for="name">Name: </label>
<p id="name">Tim<p>
<label for="location">Location: </label>
<p id="location">Boston<p>
<button id="delete_profile" type="button">
<span class="glyphicon glyphicon-trash"></span> Delete profile
</button>
</div>
<div id="footer">
</div>
</div>
</div>
</div>
You're attaching your event listener to the wrong DOM element. Attach it to the button with id delete_profile and you will only get the console message when the button or any of it's child elements are clicked. Try this snippet:
document.getElementById('delete_profile').addEventListener('click', deleteProfile);
function deleteProfile(event){
//console.log(event.target);
const profileId = event.target.parentNode.parentNode.parentNode.parentNode.id;
if(profileId === 'profile-0')
{
//Delete the profile
console.log('profile deleted');
}
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div id="container">
<div id="profile-0">
<div id="heading">
<h3>Profile Tim</h3>
</div>
<div id="body">
<div id="profileInfo_details">
<figure>
<img src="https://via.placeholder.com/140">
</figure>
<label for="name">Name: </label>
<p id="name">Tim<p>
<label for="location">Location: </label>
<p id="location">Boston<p>
<button id="delete_profile" type="button">
<span class="glyphicon glyphicon-trash"></span> Delete profile
</button>
</div>
<div id="footer">
</div>
</div>
</div>
</div>

get substring from a string by regex pattern in javascript

<div class="glint-main"> <!--match product container-->
<div class="match-header sub-header"> <!--match product header-->
This Item
</div>
<div class="match-product-details"> <!--match product information container-->
<div class="product_page" role="link" tabindex="0" onkeypress="Glint.instance.statsPopup(event, "product", "01b8d44df669e090ba13bc32f1a90116", "https://cdn.motherandbaby.co.uk/web/1/root/green-monkey-front-999-wwwmatchstickmonkeycom_w555_h555.jpg", "1272961", "https%3A%2F%2Frover.ffff.com%2Frover%2F1%2F710-53481-19255-0%2F1%3Fff3%3D4%26pub%3D5575316449%26toolid%3D11334%26campid%3D5338146124%26customid%3D%26mpre%3Dhttp%3A%2F%2Fwww.ebay.co.uk%2Fi%2F253013006125", "d2c1a14a-c575-8a00-3e14-4ce959df2e08")" onclick="Glint.instance.statsPopup(event, "product", "01b8d44df669e090ba13bc32f1a90116", "https://cdn.motherandbaby.co.uk/web/1/root/green-monkey-front-999-wwwmatchstickmonkeycom_w555_h555.jpg", "1272961", "https%3A%2F%2Frover.ffff.com%2Frover%2F1%2F710-53481-19255-0%2F1%3Fff3%3D4%26pub%3D5575316449%26toolid%3D11334%26campid%3D5338146124%26customid%3D%26mpre%3Dhttp%3A%2F%2Fwww.ebay.co.uk%2Fi%2F253013006125", "d2c1a14a-c575-8a00-3e14-4ce959df2e08")">
<div class="match-product-img-container">
<img alt="" class="match-product-image" nopin="nopin" src="./Twelve Top Baby Teething Buys _ Mother&Baby_files/1272961-thumb.jpg"> <!--match product image-->
</div>
<div class="match-product-description"> <!--match product text information container-->
<p class="match-name">
Matchstick Monkey Chewable Teething Gel...
</p>
<div class="product_price">
<span class="currency">£</span>
0.99
</div>
</div>
</div>
</div>
</div> <!--end match product container-->
<div class="similar-products"> <!--similar product for match container-->
<div class="similar-header sub-header"> <!--similar product header-->
Similar Item
</div>
<button class="all_item_btn" onclick="Glint.instance.statsPopup(event, "link", "01b8d44df669e090ba13bc32f1a90116", "https://cdn.motherandbaby.co.uk/web/1/root/green-monkey-front-999-wwwmatchstickmonkeycom_w555_h555.jpg", "1272961", "Matchstick Monkey teething gel applicator", "d2c1a14a-c575-8a00-3e14-4ce959df2e08")">
Shop >
</button>
<div class="toggle-container">
<ul class="similar-product-list">
<li class="similar-item-container">
<div class="product_page" role="link" tabindex="0" onkeypress="Glint.instance.statsPopup(event, "similar", "01b8d44df669e090ba13bc32f1a90116", "https://cdn.motherandbaby.co.uk/web/1/root/green-monkey-front-999-wwwmatchstickmonkeycom_w555_h555.jpg", "1272965", "https%3A%2F%2Frover.ffff.com%2Frover%2F1%2F710-53481-19255-0%2F1%3Fff3%3D4%26pub%3D5575316449%26toolid%3D11334%26campid%3D5338146124%26customid%3D%26mpre%3Dhttp%3A%2F%2Fwww.ebay.co.uk%2Fi%2F302247889639", "d2c1a14a-c575-8a00-3e14-4ce959df2e08")" onclick="Glint.instance.statsPopup(event, "similar", "01b8d44df669e090ba13bc32f1a90116", "https://cdn.motherandbaby.co.uk/web/1/root/green-monkey-front-999-wwwmatchstickmonkeycom_w555_h555.jpg", "1272965", "https%3A%2F%2Frover.ffff.com%2Frover%2F1%2F710-53481-19255-0%2F1%3Fff3%3D4%26pub%3D5575316449%26toolid%3D11334%26campid%3D5338146124%26customid%3D%26mpre%3Dhttp%3A%2F%2Fwww.ebay.co.uk%2Fi%2F302247889639", "d2c1a14a-c575-8a00-3e14-4ce959df2e08")">
<span class="clipped"> - opens in new window or tab</span>
<div class="similar_image_container">
<img alt="" class="similar-product-image" src="./Twelve Top Baby Teething Buys _ Mother&Baby_files/1272965-thumb.jpg"><!--similar product image-->
</div>
<div class="similar-product-description"> <!--similar product text information container-->
<p class="name">Matchstick Monkey Teething Gel</p>
<div class="product_price">
<span class="currency">£</span>
19.23
</div>
</div>
</div>
</li>
</ul>
</div>
</div><!--end similar product for match container-->
</div><!--end product full border-->
</div><!--end product full container-->
<div class="ebay_footer">
<span class="clipped"> - opens in new window or tab</span>
<img alt="ebay logo" src="./Twelve Top Baby Teething Buys _ Mother&Baby_files/ebay-transparent-logo.png">
</div>
<div class="similar-products"> <!--similar product for match container-->
<div class="similar-header sub-header"> <!--similar product header-->
Similar Item
</div>
<button class="all_item_btn" onclick="Glint.instance.statsPopup(event, "link", "46843f60877ce41020b2c34e2832788f", "https://cdn.motherandbaby.co.uk/web/1/root/uki-be_w555_h555.jpg", "1272958", "Baby Kids Silicone Elephant Teething Pacifier ", "d2c1a14a-c575-8a00-3e14-4ce959df2e08")">
Shop >
</button>
<div class="toggle-container">
<ul class="similar-product-list">
<li class="similar-item-container">
<div class="product_page" role="link" tabindex="0" onkeypress="Glint.instance.statsPopup(event, "similar", "46843f60877ce41020b2c34e2832788f", "https://cdn.motherandbaby.co.uk/web/1/root/uki-be_w555_h555.jpg", "1272958", "https%3A%2F%2Frover.ffff.com%2Frover%2F1%2F710-53481-19255-0%2F1%3Fff3%3D4%26pub%3D5575316449%26toolid%3D11334%26campid%3D5338146124%26customid%3D%26mpre%3Dhttp%3A%2F%2Fwww.ebay.co.uk%2Fi%2F291879917428", "d2c1a14a-c575-8a00-3e14-4ce959df2e08")" onclick="Glint.instance.statsPopup(event, "similar", "46843f60877ce41020b2c34e2832788f", "https://cdn.motherandbaby.co.uk/web/1/root/uki-be_w555_h555.jpg", "1272958", "https%3A%2F%2Frover.ffff.com%2Frover%2F1%2F710-53481-19255-0%2F1%3Fff3%3D4%26pub%3D5575316449%26toolid%3D11334%26campid%3D5338146124%26customid%3D%26mpre%3Dhttp%3A%2F%2Fwww.ebay.co.uk%2Fi%2F291879917428", "d2c1a14a-c575-8a00-3e14-4ce959df2e08")">
<span class="clipped"> - opens in new window or tab</span>
<div class="similar_image_container">
<img alt="" class="similar-product-image" src="./Twelve Top Baby Teething Buys _ Mother&Baby_files/1272958-thumb.jpg"><!--similar product image-->
</div>
<div class="similar-product-description"> <!--similar product text information container-->
<p class="name">New 1xBaby Kids Silicone</p>
<div class="product_price">
<span class="currency">£</span>
2.04
</div>
</div>
</div>
</li>
</ul>
</div>
</div><!--end similar product for match container-->
</div><!--end product full border-->
</div><!--end product full container-->
<div class="ebay_footer">
<span class="clipped"> - opens in new window or tab</span>
<img alt="ebay logo" src="./Twelve Top Baby Teething Buys _ Mother&Baby_files/ebay-transparent-logo.png">
</div>
function Extractallroverlinks(document_root) {
debugger;
try {
var number = 0;
var listoflinks = [];
var linkname = '';
var links = ["rover.ffff.com"];
var html = '';
var subStr = document_root.documentElement.outerHTML.match("(http|ftp|https)://([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,#?^=%&:/~+#-]*[\w#?^=%&/~+#-])?");
}
catch (ex) {
alert(ex);
}
return listoflinks;
}
I need sub-string which contains rover.ffff.com from https or http to end of the links.
like from this dummy html i need result like this
listoflinks[0]=https%3A%2F%2Frover.ffff.com%2Frover%2F1%2F710-53481-19255-0%2F1%3Fff3%3D4%26pub%3D5575316449%26toolid%3D11334%26campid%3D5338146124%26customid%3D%26mpre%3Dhttp%3A%2F%2Fwww.ebay.co.uk%2Fi%2F302247889639", "d2c1a14a-c575-8a00-3e14-4ce959df2e08")
listoflinks[1]=https%3A%2F%2Frover.ffff.com%2Frover%2F1%2F710-53481-19255-0%2F1%3Fff3%3D4%26pub%3D5575316449%26toolid%3D11334%26campid%3D5338146124%26customid%3D%26mpre%3Dhttp%3A%2F%2Fwww.ebay.co.uk%2Fi%2F291879917428", "d2c1a14a-c575-8a00-3e14-4ce959df2e08")
listoflinks[2]=https%3A%2F%2Frover.ffff.com%2Frover%2F1%2F710-53481-19255-0%2F1%3Fff3%3D4%26pub%3D5575316449%26toolid%3D11334%26campid%3D5338146124%26customid%3D%26mpre%3Dhttp%3A%2F%2Fwww.ebay.co.uk%2Fi%2F291879917428", "d2c1a14a-c575-8a00-3e14-4ce959df2e08")
listoflinks[3]=https%3A%2F%2Frover.ffff.com%2Frover%2F1%2F710-53481-19255-0%2F1%3Fff3%3D4%26pub%3D5575316449%26toolid%3D11334%26campid%3D5338146124%26customid%3D%26mpre%3Dhttp%3A%2F%2Fwww.ebay.co.uk%2Fi%2F291879917428", "d2c1a14a-c575-8a00-3e14-4ce959df2e08")

Categories