JS click事件监听器没有按预期触发函数

时间：2018-06-07 13:59:17

标签： javascript html css dom dom-events

我试图将一个click事件监听器添加到div，然后应该更改另一个元素中的css样式。我基本上试图建立一个模型窗口。单击div /按钮时，它应该更改显示属性“无”＃39;到边框＃39;但是，单击div似乎没有任何效果。我已经尝试过控制台日志记录，也没有显示任何内容。当我移动div（被点击）并将其放在HTML文档的不同部分时，它似乎工作得很好。超级困惑。

这是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>&copyScott 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>

和Javascript：

document.querySelector('#modal-btn').addEventListener('click', 
  function() {
    document.querySelector('.modal').style.display = 'border-box';
  });

和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 个答案:

答案 0 :(得分：1)

边框不适用于display属性。正如大卫所说，边框是用于盒子大小的。你的JS工作正常，我会把它扔到你的片段中：

＆＃13;
＆＃13; 
document.querySelector('#modal-btn').addEventListener('click',
  function() {
    console.log('working');
    document.querySelector('.modal').style.display = 'block';
  });
＆＃13; 
.modal {
  display: none;
}

#modal-btn {
  cursor: pointer;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我更改了display：border-box to display：block和that functions。我还添加了一个控制台日志，以显示单击按钮时它正在触发。

相关问题
最新问题