javascript - Modal will not open on click
问题描述
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">
<a href="index.html" class="nav__link">Home</a>
</li>
<li class="nav__item">
<a href="london.html" class="nav__link">London</a>
</li>
<li class="nav__item">
<a href="daytrips.html" class="nav__link">Daytrips</a>
</li>
<li class="nav__item">
<a href="cost.html" class="nav__link">Cost</a>
</li>
<li class="nav__item">
<a href="stay.html" class="nav__link">Stay</a>
</li>
<li class="nav__item">
<a href="travel.html" class="nav__link">Travel</a>
</li>
<li class="nav__item">
<a href="shop.html" class="nav__link">Shop</a>
</li>
<li class="nav__item">
<a href="contactus.html" class="nav__link">Contact Us</a>
</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';
推荐阅读
- google-bigquery - Function size limit 32K
- angular - Angular - How to grab query params from redirect url
- flutter - Flutter Controller's length property error
- javascript - If search contains "pc" search another site
- python - Python: Creating a pandas data frame out of a dictionary
- python - 我正在尝试规范化数据框中的文档列
- python - MINLPs 的 Couenne 求解器提供最优解状态，但结果远未达到预期最优
- javascript - 如何检索渲染的填充值
- javascript - const err = new MongooseError(message);
- javascript - 在 Oracle Apex 交互式报表的 _save 事件之前执行查询