the js is not working on this code :     <html>
        <head>
            <link rel="stylesheet" type="text/css" href="rise.css">
            <script>
               function myFunction{                        
                                        document.getElementById("bad").style.display="block";
                                  }
            </script>
        </head>
        <body>
            <div id="good">
                <div id="vahid">
                    <div id="one">

                        <img src="image1.jpg" id="boom"><br><br><br><br><br>
                        <!--button-->
                        
                        <img src="button.jpg" onclick="myFunction()"  id="button"><br><br><br><br>
                        <!--icons-->
                            <span class="local">
                                <img src="img.jpg">
                                <img src="img1.jpg">
                                <img src="img2.jpg">
                                <img src="img3.jpg">
                            </span><br><br><br><br>
                            <span class="local">
                                <img src="img4.jpg">
                                <img src="img5.jpg">
                                <img src="img6.jpg">
                                <img src="img7.jpg">
                            </span>
                    </div>
                </div>
                <div id="isnani">
                     <div id="third">
                        <p >
                            <span class="fourth">Dashboard</span>      
                            <span class="fifth">  + New</span>
                        </p>
                        <!--<p class="fourth">&nbsp;</p>
                        <p id="fort"><input type="text" placeholder="search your project here..." ></p>
                        <div id="jump"><img  src="search.jpg" height="20px" width="10px"></div>-->

                        <p id="sixth">    Welcome to Flatkit</p>
                        <p id="seventh"> Bootstrap 4 Web App Kit With Angular js</p>
                        

                    </div>
                </div>
            </div>
            <div id="bad">
            </div>
        </body>
    </html>

css:

    #good{
        width: 100%;
        height: 100%;
    }
    #bad{
        position:absolute;
        width: 15%;
        height: 100%;
        background-color: #023b3b;
        top:0%;
        display: none; 
    }
    #vahid{
        float: left;
        width: 7%;
        height: 100%;
        background-color: #023b3b;
    }
    #isnani{
        float: left;
        width: 93%;
        height: 100%;
        background-color: bisque;
    }
    #one {
      display:block;
      background-color: #023b3b;
       /* width:60px;
        height: 867px;*/
    }
    #boom{
        margin-top: 30%;
        height: 5%;
        width: 35%;
        float: left;
        padding-left: 20px;


    }
    .local img {
        height: 2.5%;
        width:30%;
        margin :10px 0px 10px 20px;
    }

    /*isnani starts here*/
    #third{  float:left;
        width:100%;
         height: 15%;
        border-color:white; 
    border-style : solid;
    background-color : white;

    }
    .fourth{
        margin-left: 2%;
        margin-top: 5%;
        font-family: sans-serif;

    }
    .fifth{
        color: #808080;
        font-size: 80%;
        font-weight: 800;
        font-family: arial,sans-serif;
        margin-left: 1%;

    }
    #sixth{
         font-family: sans-serif;
         font-size:150%;
        color:#666666;
        margin-top: 4%;
        margin-left: 2%;
        /*top: -2%;/
       /* line-height: 3%; */


    }
    #seventh{
        position: absolute;
         top: 11%;
        color: #808080;
        font-family: sans-serif;
        font-size: 80%;
        margin-left: 1.8%;
        margin-top: 1.5%;

        /*line-height: 3%;*/

    }
    #fort{
        float: right;
        margin-top: -65px;
        margin-right: 80px;
    }

    #button{
        margin-left: 80%;
        width: 20%;
        hyphens: 20%;
    }




the java script is not working on this html page.look at the id "bad",initially it's value is none ,but when **click on** the image it need to be displayed.that is given inside the script document.getElementById("bad").style.display="block".