Javascript functions are not implementing

Question

My webpage should display a slideshow on page load but the script functions doesn't seem to be working. I have tried running simple scripts containing prompt() and confirm() functions and they are working fine but custom functions doesn't seem to work. Same is the case with my "modal.js" script which should display a modal box on button click. Please help me out

<!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 File(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";

}

Instead of `getElementById("modalButton")` use `document.getElementById("modalButton")` — ricky, Jul 07 '17 at 07:07

score 1 · Answer 1 · answered Jul 07 '17 at 07:13

First, as mentioned by ricky, you need to use document.getElementById("modalButton") instead of getElementById("modalButton").

Second, your scripts are evaluated before the markup is parsed. Either move the script tags out of your head to the end of the body tag, or alternatively wrap the contents of both files in event listeners for load:

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

For example modal.js should look like this:

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

score 0 · Answer 2 · answered Jul 07 '17 at 07:11

You have to use document.getElementById() instead of getElementById() being used directly.

Make modifications to your modal.js file.

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

}

Working fiddle - https://jsfiddle.net/arjunskumar47/L8Lvwywe/

Javascript functions are not implementing

2 Answers2