javascript - JS点击事件监听器没有按预期触发功能

标签 javascript html css dom dom-events

我正在尝试将点击事件监听器添加到 div，然后应该更改另一个元素中的 css 样式。我基本上是在尝试制作模型窗口。单击 div/按钮时，它应将显示属性从“无”更改为“边框框”。但是，单击 div 似乎没有任何效果。我已经尝试过控制台日志记录，但那里也没有任何显示。当我移动 div(正在单击)并将其放在 HTML 文档的不同部分时，它似乎工作正常。 super 困惑。

这是 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;}


}

最佳答案

边框框不适用于显示属性。正如 David 提到的，border-box 用于调整盒子大小。你的 JS 工作正常，我会把它扔进一个片段给你:

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>

我将 display: border-box 更改为 display: block 和那个函数。我还添加了一个控制台日志，以显示当您单击按钮时它正在触发。

关于javascript - JS点击事件监听器没有按预期触发功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50743169/

上一篇：css - WordPress 将 CSS 存储在缓存文件中？

下一篇：HTML :first-child not giving desire result

相关文章：

javascript - 使用 Node js ('nw.gui' 将对象传递给其他窗口)

javascript - 在焦点/模糊上显示/隐藏元素

javascript - Threejs 中的 glTFLoader 与 ObjLoader？

javascript - 在 Datebox 插件中显示周数

javascript - 正则表达式计算不包括 html 标签的单词

html - CSS Calc 返回 0 但在我的 fiddle 中有效

css - 如何使 div 拉伸(stretch)以适应 textarea 的高度？

javascript - 如何使用隐藏字段中的数据设置 th.action？

html - 去除手机屏幕中的翻转图像

javascript - 使用 javascript 检测方向变化

©2024 IT工具网  联系我们