سؤال

I'm trying to make a simple blog like site for practice with a menu on the side that can be hidden or shown. I'm trying to make this happen with native Javascript in an external Javascript file. My problem is that my events are being triggered as soon as the site is loaded, or they aren't triggered at all. I'm sure I've made some beginners mistake. Here's my code:

Javascript: 

var shower = document.getElementById('showmenu');
var hider = document.getElementById('site');

function hideshow() {

shower.onclick = function() {
    document.getElementById('site').style.width="84%";
    document.getElementById('menu').style.display="block";
    document.getElementById('showmenu').style.display="none";
}

hider.onclick = function() {
    document.getElementById('menu').style.display="none";
    document.getElementById('site').style.width="100%";
    document.getElementById('showmenu').style.display="block";
}
 }


 window.onload = function() {

hideshow();

 }

HTML:

<!doctype html>
<meta charset="utf-8">

<html>
<head>
 <title> Javascript Menu Test 2.0</title>

 <link rel="stylesheet" type="text/css" href="style.css">



</head>
<body>

<div id="wrapper">
    <div id="menu">
        <aside>
            <ul>
                <li><input type="text"></li>
                <li>Vel Purus</li>
                <li>Dolor Sit</li>
                <li>Lorem Ipsum</li>
            </ul>
        </aside>
    </div>
    <div id="site">
        <div id="bannerImage">
            <input type="button" value="M" id="showmenu">
            <img src="banner.jpg">
        </div>
        <div id="article">

            <h1> Header</h1>

                                  <!--text goes here-->

            </div>
        </div>
    </div>
</div>

    <script type="text/javascript" src="menuhider.js"></script>

</body>
</html>

CSS:

        html,body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    ul {
        margin: 0;
        padding: 0; 
    }

        #wrapper {
            height: 100%;
            height: 100%;
        }

            #menu {
                display: none;
                position: fixed;
                height: 100%;
                width: 16%;
                background-color: #131313;
                float: left;
                color: white;
                font-family: 'arial', sans-serif;
            }

                #menu li {
                    margin-top: 8%;
                    margin-left: 1%;
                    padding-top: 1%;
                    padding-bottom: 1%;
                }

                    #menu li:hover {
                        cursor: pointer;
                        background-color: #424242;
                    }

                    #menu input {
                        border: none;
                        outline: none;
                    }

            #site {
                height: 100%;
                width: 100%;
                background-color: white;
                float: right;
            }

                #site img {
                    position: relative;
                    z-index: 0;
                    width: 100%;
                    height: 10%;    
                }

                #showmenu {
                    position: absolute;
                    position: fixed;
                    z-index: 1;
                    border: none;
                    width: 5%;
                    height: 5%;
                    margin-left: 1%;
                    background-color: #131313;
                    color: white;
                    outline: none;
                }

                    #showmenu:hover {
                        cursor: pointer;
                        background-color:  #424242;
                    }

            #text {
                width: 85%;
                margin-left: 5%;
                font-size: 1.2em;
            }
هل كانت مفيدة؟

المحلول

There is no reason to use window.onload when the scrpt is included at the bottom. Remove that and just include the functions.

Another problem is you have two click events nested.

So they both are going to be triggered. You need to cancel the inner click so it does not propagate to the parent. 

(function(){

    var shower = document.getElementById('showmenu');
    var hider = document.getElementById('site');

    hider.onclick = function() {
        document.getElementById('menu').style.display="none";
        document.getElementById('site').style.width="100%";
        document.getElementById('showmenu').style.display="block";
    }

    shower.onclick = function (e) {
        document.getElementById('site').style.width="84%";
        document.getElementById('menu').style.display="block";
        document.getElementById('showmenu').style.display="none";

        if (!e) {
          e = window.event;
        }

        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
        return false;
    }

})();
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top