JS click event listener doesn't trigger function as expected
Question
I'm trying to add a click event listener to a div that should then change a css style in another element. I'm basically trying to make a model window. When the div/button is clicked, it should change the display property from 'none' to 'border-box'. Clicking the div doesn't seem to be having any effect, however. I've tried console logging and nothing shows up there either. When I move the div (that is being clicked) and put it in a different part of the HTML doc it seems to work fine tho. Super confused.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scott Munro - Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Outline|Titillium+Web" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<!-- nav bar -->
<nav class="navbar">
<a id="home-link" href="#top"></a>
<ul class="icon-list">
<li class="github-icon icon"><a href="https://github.com/catsinspacesuits"><i class="fab fa-github"></i></a></li>
<li class="linkedin-icon icon"><a href="#"><i class="fab fa-linkedin"></i></a></li>
<li class="codepen-icon icon"><a href="#"><i class="fab fa-codepen"></i></a></li>
</ul>
<ul class="header-list">
<li class="nav-link"><a href="#about-section">About</a></li>
<li class="nav-link"><a href="#projects-section">Projects</a></li>
<li class="nav-link"><a href="#contact-section">Contact</a></li>
</ul>
</nav> <!-- end of navbar -->
<div class="header-title">
<h1>Scott Munro</h1>
<h2>Web Developer</h2>
<div class="section-divider"></div>
</div>
<div class="scrolling">
<div id="top"></div> <!-- allows smooth scroll to top of page -->
<img src="layer-front3.png" class="layer" id="layer-one"></img>
<img src="layer1b.png" class="layer" id="layer-oneb"></img>
<img src="layer2.png" class="layer" id="layer-two"></img>
<img src="layer3.png" class="layer" id="layer-three"></img>
<img src="layer4.png" class="layer" id="layer-four"></img>
</div>
<div id="sun"></div>
<div id="sky"></div>
</header>
<!-- Sections: -->
<!-- INTRO -->
<section class="section-background intro-color">
<div class="intro-container container">
<p>Hi, I'm Scott! I'm a developer based in Berlin who is available for hire. I'm passionate about building apps with clean, tested and maintainable code. I have an aptitude for problem solving and a hunger for continuous improvement. I am looking to work as part of a team where I can contribute to a meaningful project whilst continuing to learn from my peers.</p>
</div>
</section>
<!-- ABOUT -->
<section class="section-background about-color">
<div class="about-container container">
<h2 id="about-section">About Me</h2>
<div class="section-divider"></div>
<img id="head" src="img/8bit_head.jpg" alt="head" class="responsive">
<p></p>
<div class="about-skills" class="about-box">
<h3>My Skills</h3>
<ul id="skill-list">
<li>HTML5</li>
<li>CSS3</li>
<li>SASS</li>
<li>Bootstrap</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Ruby</li>
<li>Rails</li>
<li>Responsive Web Design</li>
<li>Version Control (Git)</li>
</ul>
</div>
<a id="resume-button" href="cv.pdf" download>Download Resume
<div id="file-icon"></div>
</a>
</div> <!-- end of about container -->
</section>
<!-- PROJECTS -->
<section class="section-background projects-color">
<div class="projects-container container">
<h2 id="projects-section">Projects</h2>
<div class="section-divider"></div>
<div class="project">
<h3>E-commerce Site</h3>
<div class="project-image project-one"></div>
<p class="project-description">Lorem ipsum dolor sit amet, pri audire deterruisset ut, mei eu stet diceret pertinacia. Has salutandi mediocritatem te, copiosae disputationi conclusionemque in pro, fugit eleifend argumentum quo et. Sea te quidam instructior complectitur, est vidisse consequat deterruisset ex.</p>
<div class="project-icons">
<a href="https://github.com/catsinspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a>
<div class="project-btn" id="modal-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="project">
<h3>Portfolio Site</h3>
<div class="project-image project-two"></div>
<p class="project-description">Mea novum iusto dignissim ne, zril convenire forensibus duo an, ne pri dicant dolores omittantur. Nam ex fugit deseruisse, no stet iuvaret conceptam vix. Sit ut tempor epicurei expetendis, ne mel odio suscipit disputando, ut choro munere sit.</p>
<div class="project-icons">
<a href="https://github.com/catsinspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a>
<div class="project-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="project">
<h3>Calculator</h3>
<div class="project-image project-three"></div>
<p class="project-description">Eu vim nibh velit, no intellegat intellegam ius. Est harum movet exerci no, an eos harum tacimates adversarium. Ei soleat accommodare sed, decore soluta ad qui. Pri tamquam laoreet id. Nec labore noluisse consetetur ex, duo evertitur prodesset eu, et quod choro conceptam vix. Est modo contentiones in.</p>
<div class="project-icons">
<a href="https://github.com/catsinspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a>
<div class="project-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="project">
<h3>Javascript To-do App</h3>
<div class="project-image project-four"></div>
<p class="project-description">Eu vim nibh velit, no intellegat intellegam ius. Est harum movet exerci no, an eos harum tacimates adversarium. Ei soleat accommodare sed, decore soluta ad qui. Pri tamquam laoreet id. Nec labore noluisse consetetur ex, duo evertitur prodesset eu, et quod choro conceptam vix. Est modo contentiones in.</p>
<div class="project-icons">
<a href="https://github.com/catsinspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a>
<div class="project-btn">More details</div>
<div class="project-btn">Visit site</div>
</div>
</div>
<div class="modal"></div> <!-- Modal for projects windows -->
</div> <!-- end of project container -->
</section>
<div class="clearfix"></div> <!-- clear fix below Projects section -->
<!-- CONTACT -->
<section class="section-background contact-color">
<div id="contact-container" class="container">
<div id="contact-header">
<h2 id="contact-section">Get in Touch</h2>
<div class="section-divider"></div>
</div>
<p>Email me directly at <strong>simunro (at) hotmail (dot) co (dot) uk</strong> or fill out the form below. Be sure to check out my <span href="" class="form-link">Github</span>, <span class="form-link">LinkedIn</span> and <span class="form-link">Codepen</span> accounts too!</p>
<form action="https://formspree.io/simunro@hotmail.co.uk" method="POST">
<label>Name: </label>
<input type="text" name="name" id="name"><br>
<label>Email: </label>
<input type="email" name="_replyto"><br>
<label>Message: </label>
<textarea placeholder="Please leave your message here..." required></textarea><br>
<input type="submit" value="Send" id="send-button">
</form>
</div> <!-- end of contact container -->
</section>
<!-- FOOTER -->
<footer>
<ul class="icon-list">
<li class="github-icon icon"><a href="https://github.com/catsinspacesuits"><i class="fab fa-github"></i></a></li>
<li class="linkedin-icon icon"><a href="#"><i class="fab fa-linkedin"></i></a></li>
<li class="linkedin-icon icon"><a href="#"><i class="fab fa-codepen"></i></a></li>
</ul>
<div class="copyright"><p>©Scott Munro 2018</p></div>
<div class="section-divider"></div>
</footer>
<!-- SCRIPTS -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollorama.js"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</body>
</html>
And the Javascript:
document.querySelector('#modal-btn').addEventListener('click',
function() {
document.querySelector('.modal').style.display = 'border-box';
});
And CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Titillium Web, Arial, sans-serif;
font-size: 1rem;
}
/*NAV BAR*/
.navbar {
position: fixed;
top: 0;
z-index: 2;
width: 100%;
background-color: #222222;
}
.navbar ul {
float: right;
margin-top: 1rem;
}
.header-list {
margin-right: 2rem;
}
.navbar li {
display: inline-block;
padding: 0.8rem;
}
.navbar a {
color: white;
text-transform: uppercase;
letter-spacing: 0.6em;
text-decoration: none;
font-size: 0.8em;
}
.navbar a:hover {
color: #FFD03F;
}
.fab {
font-size: 1.8rem;
color: white;
}
.fab:hover {
color: #FFD03F;
}
#home-link {
float: left;
background-image: url(img/house_white.png);
background-size: 80%;
background-repeat: no-repeat;
margin: 25px 0px 0px 30px;
width: 40px;
height: 40px;
}
/*PARALLAX JUMBO*/
header {
width: 100%;
height: 720px;
}
.scrolling {
position: relative;
margin: auto;
width: 100%;
height: 600px;
z-index: 1;
}
.layer {
width: 100%;
height: 600px;
background-size: cover;
position: fixed;
}
#layer-one {
position: fixed;
height: 800px;
top: -60px;
left: 0;
z-index: -1;
}
#layer-oneb {
position: fixed;
height: 700px;
top: 60px;
left: 0;
z-index: -2;
}
#layer-two {
/*background-image: url('layer2.png');*/
left: 0;
top: 50px;
z-index: -4;
}
#layer-three {
/*background-image: url('layer3.png');*/
height: 700px;
top: -15px;
left: 0;
z-index: -3;
}
#layer-four {
/*background-image: url('layer4.png');*/
top: 65px;
left: 0;
z-index: -5;
}
#sun {
position: relative;
left: 80%;
z-index: -5;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #FFD03F;
box-shadow: 0px 0px 40px 20px #FFD03F;
animation: sunrise 6s ease-out forwards;
}
#sky {
position: relative;
top: -2rem;
z-index: -6;
width: 100%;
height: 600px;
background: linear-gradient(darkblue, #FFD03F);
animation: sky 6s ease-out forwards;
}
/*TITLE*/
.header-title {
position: absolute;
top: 150px;
left: 400px;
float: left;
z-index: 1;
text-align: center;
animation: fade 7s forwards;
}
.header-title h1 {
font-size: 4.7rem;
color: white;
letter-spacing: 0.6rem;
opacity: 0.3;
}
.header-title h2 {
font-size: 2.5rem;
color: white;
opacity: 0.3;
}
.header-title .section-divider {
width: 40%;
opacity: 0.3;
background-color: white;
}
/*SECTIONS*/
.section-background {
font-size: 1rem;
margin: 0 auto;
padding: 6rem 2rem 7rem 2rem;
z-index: -8;
}
.container {
width: 60%;
margin: 0 auto;
padding: 5rem 0;
background-color: white;
opacity: 0.9;
padding: 3rem;
}
.intro-color {
background-color: #07337A;
z-index: 8;
}
.about-color {
background-color: white;
}
.projects-color {
background-color: white;
position: relative;
}
.contact-color {
background-color: #ddd;
}
#top { /*enables smooth scrolling on home icon link*/
position: absolute;
top: -40rem;
}
/*INTRO SECTION*/
.intro-container p {
font-size: 2rem;
}
/*ABOUT SECTION*/
.about-container {
background-color: #07337A;
color: white;
box-shadow: 2rem 2rem 50rem 2rem grey;
}
.about-container p {
font-size: 1.3rem;
padding: 0 1rem 2rem 1rem;
line-height: 3rem;
}
.about-container h2 {
font-size: 2.6rem;
text-align: center;
padding: 2rem;
}
.about-box {
border: 1px solid black;
padding: 1.6rem;
margin: 3rem 1.5rem 3rem 0;
display: inline-block;
}
#resume-button {
border: 2px solid black;
padding: 1rem 4rem 1rem 1rem;
box-shadow: 3px 3px 5px black;
background-color: white;
text-decoration: none;
color: black;
transition: 700ms;
float: right;
}
#resume-button:hover {
background-color: #5c5292;
color: white;
}
#file-icon {
display: inline-block;
position: absolute;
top: 0.8rem;
right: 1rem;
width: 2rem;
height: 2rem;
background: url(img/file.png) no-repeat;
}
.about-skills li {
display: inline-block;
list-style-type: none;
padding: 0.3rem;
margin: 0.3rem;
border: 1px solid white;
border-radius: 5px;
}
.responsive { /*to make image responsive*/
width: 100%;
height: auto;
}
#head {
float: left;
width: 30%;
margin-right: 3rem;
}
/*PROJECTS SECTION*/
.projects-container h2 {
text-align: center;
padding: 3rem 0 1.6rem 0;
font-size: 2.6rem;
}
.projects-container {
width: 80%;
}
.project {
position: relative;
float: left;
width: 40%;
height: 400px;
border: 1px solid black;
padding: 2%;
margin: 4.5%;
text-align: left;
font-size: 0.9rem;
box-shadow: 0 0 5rem #b7b7b7;
}
.project-image {
width: 37%;
height: 45%;
float: left;
background-size: cover;
background-position: center center;
border: 1px solid black;
margin: 1rem 1rem 0 0;
}
.project p {
padding: 1rem 0;
}
.project-icons {
width: 100%;
position: absolute;
bottom: 1%;
left: 0;
font-size: 1rem;
padding: 8px;
}
.project-btn {
float: left;
border: 1px solid black;
padding: 7px 20px;
margin: 0 5px;
border-radius: 4px;
box-shadow: 3px 3px 10px grey;
}
.project-icons .fab {
color: black;
border: none;
font-size: 2.6rem;
padding: 0;
margin-right: 10px;
}
.project-three {
background-image: url(img/calculator.jpg);
}
.project-four {
background-image: url(img/todo.png);
}
.clearfix {
clear: both;
}
/*PROJECTS MODAL*/
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
display: none;
}
/*CONTACT SECTION*/
#contact-container {
padding: 0;
width: 50%;
clear: both;
}
#contact-container h2 {
text-align: center;
font-size: 2.4rem;
margin: 1.2rem;
padding: 2rem 4rem 0 4rem;
}
#contact-header {
width: 100%;
margin: 0 auto;
padding: 0 0 3% 0;
background-color: #07337A;
color: white;
}
.section-divider {
width: 24%;
height: 4px;
margin: 0 auto 3rem auto;
background-color: lightblue;
}
#contact-container {
box-shadow: 0 0 100px #555555;
}
#contact-container p {
padding: 2.6rem;
text-align: center;;
font-size: 1.7rem;
}
.form-link {
color: #1158C8;
}
form {
margin: 0 auto;
width: 100%;
background-color: white;
text-align: center;
}
form label {
display: block;
padding: 0.7rem 0;
}
form textarea {
height: 14rem;
}
input, textarea {
display: inline-block;
width: 80%;
border: 1px solid black;
padding: 0.5rem;
margin: 0 auto;
}
#send-button {
margin: 3rem auto;
border: 1px solid #222222;
padding: 0.5rem;
box-shadow: 5px 5px 20px #333333;
background-color: #09429D;
color: white;
font-size: 1rem;
letter-spacing: 0.3rem;
transition: 400ms;
}
#send-button:hover {
background-color: #07337A;
cursor: pointer;
}
/*FOOTER*/
footer {
position: absolute;
height: auto;
width: 100%;
background-color: #222222;
}
footer li {
list-style: none;
display: inline-block;
padding: 1rem;
}
.icon-list {
width: 12rem;
height: 4rem;
margin: 0 auto;
}
.copyright p {
width: 100%;
margin: 0 auto;
text-align: center;
letter-spacing: 0.4em;
font-size: 1rem;
padding-bottom: 1rem;
color: white;
background-color: #222222;
}
footer .section-divider {
background-color: white;
margin-bottom: 1.5rem;
border: 0.5px solid white;
height: 1px;
width: 11rem;
}
/*KEYFRAMES*/
@keyframes sky {
from {top: 10px;}
to {top: -170px;}
}
@keyframes sunrise {
from {top: 450px;}
to {top: 210px;}
}
@keyframes fade {
from {opacity: 0;}
to {opacity: 1;}
}
/*MEDIA QUERIES*/
/*Small:*/
@media only screen and (max-width: 600px) {
html {font-size: 10px;}
.container {width: 100%;
padding: 8px;
margin: 0;
}
#contact-container {width: 100%;}
.projects-container {width: 100%;}
.layer {width: 100vw;
height: 100vh;
object-fit: cover;}
.section-background {padding: 0;}
.header-title h1 {font-size: 24px;}
.header-title {left: 70px;
top: 160px;
}
}
#home-link {display: none;}
}
1 answers
solution1
1 2018-06-07 14:18:49
Border-box doesn't work for the display property. As David mentioned border-box is for box-sizing. Your JS works fine, I would I've tossed it into a snippet for you:
document.querySelector('#modal-btn').addEventListener('click', function() { console.log('working'); document.querySelector('.modal').style.display = 'block'; });
.modal { display: none; } #modal-btn { cursor: pointer; }
<section class="section-background projects-color"> <div class="projects-container container"> <h2 id="projects-section">Projects</h2> <div class="section-divider"></div> <div class="project"> <h3>E-commerce Site</h3> <div class="project-image project-one"></div> <p class="project-description">Lorem ipsum dolor sit amet, pri audire deterruisset ut, mei eu stet diceret pertinacia. Has salutandi mediocritatem te, copiosae disputationi conclusionemque in pro, fugit eleifend argumentum quo et. Sea te quidam instructior complectitur, est vidisse consequat deterruisset ex.</p> <div class="project-icons"> <a href="https://github.com/catspacesuits/new-portfolio"><i class="fab fa-github project-btn"></i></a> <div class="project-btn" id="modal-btn">More details</div> <div class="project-btn">Visit site</div> </div> </div> <div class="modal"></div> <!-- Modal window --> </div> <!-- end of project container --> </section>
I changed display: border-box to display: block and that functions. I also added a console log to show that it is firing when you click the button.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JS click event on second element with similar behavior doesn't trigger
Js #urls doesn't trigger the function on the first click
My function (using an event listener) doesn't seem to give the expected output. How can I fix it?
JS click event listener only works once and not with the expected if statement
Clicking on label doesn't trigger click event
Click event doesn't trigger desired effect
Click event doesn't trigger in my case
First click doesn't trigger an event
Javascript click listener, but doesn't trigger on child element?
Event listener doesn't trigger dynamically created element on JavaScript
Related Tags