在現有元素上運行腳本時出錯

我遇到運行腳本和獲取以及addEventListener屬性出錯的問題。我知道這是在我引用DOM中不存在的元素時發生的，但我在標記的底部運行腳本，因此我不確定需要更改哪些內容。在現有元素上運行腳本時出錯

腳本：

var slideLeft = new Menu({ 
    wrapper: '#o-wrapper', 
    type: 'slide-left', 
    menuOpenerClass: '.c-button', 
    maskId: '#c-mask' 
    }); 

    var slideLeftBtn = document.querySelector('#c-button--slide-left'); 

    slideLeftBtn.addEventListener('click', function(e) { 
    e.preventDefault; 
    slideLeft.open(); 
    });

例子：http://codepen.io/ourcore/pen/ZBLeVQ

工作演示：http://callmenick.com/_development/slide-push-menus/

來源

2016-11-19 Mario Parra

我能想到的，這是確保您有編號是否正確 – Mobius

我想你的codepen，我也得到了同樣的錯誤嘛。將代碼複製到jsfiddle並且我沒有錯誤... – Falk

無關，但您可能意指'event.preventDefault（）' –

我更新了CodePen：http://codepen.io/HenryGranados/pen/rWjmVj

這裏是一個可行的解決方案。希望它能幫助:)

var slideLeft = new Menu({ 
 
    wrapper: '#o-wrapper', 
 
    type: 'slide-left', 
 
    menuOpenerClass: '.c-button', 
 
    maskId: '#c-mask' 
 
    }); 
 

 
    var slideLeftBtn = document.querySelector('#c-button--slide-left'); 
 
    
 
    slideLeftBtn.addEventListener('click', function(e) { 
 
    e.preventDefault; 
 
    slideLeft.open(); 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://callmenick.com/_development/slide-push-menus/css/style.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="http://callmenick.com/_development/slide-push-menus/css/font-awesome.min.css"> 
 
<script type="text/javascript" src = "http://callmenick.com/_development/slide-push-menus/js/dist/menu.js"></script> 
 

 
<main class="o-content"> 
 
    <div class="o-container"> 
 
    <div class="c-buttons"> 
 
     <button id="c-button--slide-left" class="c-button">Slide Left</button> 
 
    </div> 
 
    </div> 
 
</main> 
 

 
<div id="o-wrapper" class="o-wrapper"> 
 
</div> 
 

 
<nav id="c-menu--slide-left" class="c-menu c-menu--slide-left"> 
 
    <button class="c-menu__close">&larr; Close Menu</button> 
 
    <ul class="c-menu__items"> 
 
    <li class="c-menu__item"><a href="#" class="c-menu__link">Home</a></li> 
 
    <li class="c-menu__item"><a href="#" class="c-menu__link">About</a></li> 
 
    <li class="c-menu__item"><a href="#" class="c-menu__link">Services</a></li> 
 
    <li class="c-menu__item"><a href="#" class="c-menu__link">Work</a></li> 
 
    <li class="c-menu__item"><a href="#" class="c-menu__link">Contact</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div id="c-mask" class="c-mask"></div>

來源

2016-11-19 03:55:14 HenryDev

在現有元素上運行腳本時出錯

回答

相關問題