Javascript函数不是实现

问题描述：

我的网页应该在页面加载时显示幻灯片，但脚本函数似乎没有工作。我试着运行包含prompt（）和confirm（）函数的简单脚本，它们工作正常，但自定义函数似乎不起作用。我的“modal.js”脚本也是如此，它应该在按钮点击时显示一个模式框。请帮我出来Javascript函数不是实现

<!doctype html> 
<html lang = "en"> 
<head> 
    <title> Ice Cream </title> 
    <link rel="stylesheet" href="main_ice.css" /> 
    <script type = "text/javascript" src = "slideShow.js"> </script> 
    <script src = "modal.js"> </script> 
    <meta charset = "utf-8" /> 
</head> 
<body> 
    <div id = "big_wrapper"> 
      <header class= "top_header"> 
       <hgroup> 
        <h1> ICE Funky </h1> 
        <h3> ice cream production </h3> 
       </hgroup> 
      </header> 

      <nav class= "nav_bar"> 
       <ul> 
        <label><li name = "home"> Home </li> 
        <li> About Us </li> 
        <li> Products </li> 
        <li> Services </li> 
        <li> Contacts </li> 
        </label> 
       </ul> 
      </nav> 


     <div id = "slideshow"> 

      <span class = "image_slide"><img src = "4072.jpg" width = "500px" height = "300px"/> </span> 
      <span class = "image_slide"><img src = "26551.jpg" width = "500px" height = "300px"/> </span> 
      <span class = "image_slide"><img src = "30225.jpg" width = "500px" height = "300px"/> </span> 
      <span class = "image_slide"><img src = "74223.jpg" width = "500px" height = "300px"/> </span> 
      <span class = "image_slide"><img src = "74285.jpg" width = "500px" height = "300px"/> </span> 



     </div> 
     <button id = "modalButton"> Modal </button> 
       <div id = "myModal"> 
        <div id = "modal_title"> Main Title </div><br><br> 
        <div id = "modal_body"> Body </div> 
       </div> 

    </div> 

</body> 
</html>

！----------- CSS File ----------------！

*{ 
    margin:0px; 
    padding:0px; 
} 

header, footer, nav, hgroup, aside, article, section{ 
    display : block; 
} 

body{ 
    width:100%; 
    display: -webkit-box; 
    -webkit-box-pack: center; 
} 

#big_wrapper{ 
    max-width: 100%; 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-box-flex: 1; 
} 

.top_header{ 
    position: absolute; 
    margin: 20px 0px 0px 120px; 
    border: 2px solid black; 
    width: 180px; 
    padding: 25px; 

} 

.nav_bar{ 
    margin-left: 350px; 
    margin-top: 85px; 
    text-align: center; 
} 
.nav_bar li{ 
    position: relative; 
    list-style: none; 
    display: inline-block; 
    -webkit-box-flex: 1; 
    margin: 20px; 
    border: 2px solid white; 
    padding: 5px; 
    -webkit-transition: border-left 1s, border-top 3s, border-right 4s, 
         border-bottom 6s; 
} 

.nav_bar li:hover{ 
    border-left: 2px solid black; 
    border-top: 2px solid black; 
    border-right: 2px solid black; 
    border-bottom: 2px solid black; 
} 

#slideshow{ 
    position: absolute; 
    margin-top: 50px; 
    margin-left: 400px; 
    width: 500px; 
} 

.image_slide{ 
    position: absolute; 
    /*display: none;*/ 


} 

.prev, .next { 
    cursor: pointer; 
    position: absolute; 
    top: 150px; 
    width: auto; 
    margin-top: -22px; 
    padding: 16px; 
    color: yellow; 
    font-weight: bold; 
    font-size: 18px; 
    transition: 0.6s ease; 
    border-radius: 0 3px 3px 0; 
} 

.next{ 
    /*left: 458px;*/ 
    right: 0px; 
} 

.prev:hover, .next:hover { 
    background-color: rgba(0,0,0,0.8); 
} 

#modalButton{ 
    background: rgba(0,256,0,0.5); 
    padding: 5px; 
    margin-left: 40px; 
    margin-top: 40px; 
    color: chocolate; 
} 

#myModal{ 
    position: fixed; 
    top:0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 0; 
    background-color: rgba(0,0,0,0.4); 
    display: none; 
} 

#modal_title{ 
    width: 95%; 
    height: 5%; 
    position: fixed; 
    bottom: 15%; 
    left: 30px; 
    background: rgba(0,256,0,0.4); 
} 

#modal_body{ 
    width: 95%; 
    height: 10%; 
    position: fixed; 
    top: 85%; 
    left: 30px; 
    background: rgba(256,256,256,0.4); 

}

！-------------- JS文件（slideShow.js）----------------！

var slideIndex = 0; 
    showSlides(); 

    function showSlides() { 
     var i; 
     var slides = document.getElementsByClassName("image_slide"); 
     for (i = 0; i < slides.length; i++) { 
      slides[i].style.display = "none"; 
     } 
     slideIndex++; 
     if (slideIndex> slides.length) {slideIndex = 1} 
     slides[slideIndex-1].style.display = "block"; 
     setTimeout(showSlides, 2000); // Change image every 2 seconds 
    }

！--------------- JS File（modal.js）-------------------

modalButton = getElementById("modalButton"); 
myModal = getElementById("myModal"); 
modalButton.onclick = function(){ 
    prompt("hi"); 
    myModal.style.display = "block"; 

}

你在控制台中是否有错误？ – Lazyexpert

'getElementById（“modalButton”）'use'document.getElementById（“modalButton”）' – ricky

答

你必须使用document.getElementById()而不是getElementById()直接使用。

修改您的modal.js文件。

modalButton = document.getElementById("modalButton"); 
myModal = document.getElementById("myModal"); 
modalButton.onclick = function(){ 
    prompt("hi"); 
    myModal.style.display = "block"; 

}

工作小提琴 - https://jsfiddle.net/arjunskumar47/L8Lvwywe/

答

首先，正如里奇所说，你需要使用document.getElementById("modalButton")而不是getElementById("modalButton")。

其次，在解析标记之前对脚本进行评估。无论是移动脚本标记出你head到body标签的结束，或者包裹这两个文件的内容，事件侦听器负载：

window.addEventListener('load', function() { 
    // your code here 
});

例如modal.js应该是这样的：

window.addEventListener('load', function() { 
    var modalButton = document.getElementById("modalButton"); 
    var myModal = document.getElementById("myModal"); 
    modalButton.onclick = function(){ 
     prompt("hi"); 
     myModal.style.display = "block"; 
    } 
});

Javascript函数不是实现

相关推荐