Проблемы с прослушивателем событий

Я пытаюсь сделать простой блог, как сайт для практики, с помощью меню на стороне, которое можно скрыть или показать. Я пытаюсь сделать это с собственным javascript во внешнем файле javascript. Моя проблема в том, что мои события запускаются сразу после загрузки сайта или вообще не запускаются. Я уверен, что я совершил ошибку noobie. Вот мой код:Проблемы с прослушивателем событий

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

источник

2014-02-10 user2941726

Скрытие, похоже, работает нормально, но когда вы скрываете, вы также скрываете один элемент, который вы используете, чтобы показать вещи снова. Если вы перемещаете это из скрытых элементов, кажется, что он работает нормально http://jsfiddle.net/j08691/jkQyd/ – j08691

Там нет причин использовать window.onload, когда SCRPT входит в дно. Удалите это и просто включите функции.

Другая проблема заключается в том, что у вас есть два события щелчка.

Таким образом, оба они будут запущены. Вам нужно отменить внутренний щелчок, чтобы он не распространялся на родителя.

(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; 
    } 

})();

источник

2014-02-10 18:33:22 epascarello

Я пробовал делать две отдельные функции, одну для показа и одну для скрытия. Функция показа, запускаемая при загрузке, и hider не работает вообще. – user2941726

Я только что обновил свой вопрос. Вам не нужно загружать. – epascarello

Так что мне нужно использовать onload только в том случае, если скрипт находится наверху? Ницца. – user2941726

Проблемы с прослушивателем событий

ответ

Смежные вопросы