Javascript函数没有实现_Javascript_Html_Css

Javascript函数没有实现

javascript html css

Javascript函数没有实现,javascript,html,css,Javascript,Html,Css,我的网页应该在页面加载时显示幻灯片，但脚本功能似乎不起作用。我试过运行包含prompt（）和confirm（）函数的简单脚本，它们工作正常，但自定义函数似乎不起作用。我的“modal.js”脚本也是如此，它应该在单击按钮时显示一个模态框。请帮帮我 <!doctype html> <html lang = "en"> <head> <title> Ice Cream </title> <link rel="style

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

<!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>

!--------------JS文件（slideShow.JS）------------

*{
    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);

}

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

}

您必须使用

document.getElementById（）

而不是直接使用

getElementById（）

对modal.js文件进行修改

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

}

工作小提琴-

首先，正如ricky提到的，您需要使用

document.getElementById（“modalButton”）

而不是

getElementById（“modalButton”）

第二，在解析标记之前对脚本进行评估。将脚本标记从

头部

移动到

正文

标记的末尾，或者将两个文件的内容包装到事件侦听器中以供加载：

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";
    } 
} );

控制台中是否有任何错误？使用

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