未捕獲ReferenceError：toggleSidebar未定義

Question

即時通訊嘗試打開我的側邊欄時出現錯誤「未捕獲的ReferenceError：toggleSidebar未定義爲 」HTMLDivElement.onclick「錯誤。 它在codepen中工作，但在我的網站上似乎並不奏效！ 我的網站：Skintheft.com/SufferSite

指數代碼示例 -

<div id="sidebar"> 
    <div class="toggle-btn" onclick="toggleSidebar()"> 
    <span></span> 
    <span></span> 
    <span></span> 
    </div> 
    <ul> 

    <li>Home </li> 
    <li>Contact </li> 
    <li>About </li> 

    </ul> 

css文件：

* { 
    margin:0px; 
    padding:0px; 
    font-family:sans-serif; 
} 


#sidebar { 
    position:fixed; 
    width:200px; 
    height:100%; 
    background:#727e87; 
    left:-200px; 
    transition: all 250ms linear; 

} 

#sidebar.active { 
    left:0px; 
} 

#sidebar ul li { 
    color:rgba(230,230,230,0.9); 
    list-style:none; 
    padding:15px 10px; 
    border-bottom: 1px solid rgba(100,100,100,0.3); 
} 

#sidebar .toggle-btn { 
    position:absolute; 
    left:230px; 
    top:20px; 
} 

#sidebar .toggle-btn span { 
    display:block; 
    width:30px; 
    height:5px; 
    background:#727e87; 
    margin: 5px 0px; 
} 

和最後但並非最不重要的JavaScript

function toggleSidebar(){ 
    document.getElementById("sidebar").classList.toggle('active'); 
} 

我個人不知道如何解決這個問題，我會深表感謝任何幫助！謝謝:)

Answer 1

你提供的代碼工作得很好。我在你的網站上唯一可以看到的問題是你提供的下面的JS在網站中用引號括起來，請改變它並且切換工作正常。

我在說下面的代碼。

JS之前：

" 
function toggleSidebar() { 
    document.getElementById("sidebar").classList.toggle('active'); 
} 
" 

JS後：

<script> 
function toggleSidebar() { 
    document.getElementById("sidebar").classList.toggle('active'); 
} 
</script> 

的原因，你所得到的錯誤是因爲在HTML。

<div class="toggle-btn" onclick="toggleSidebar()"> 

它正在搜索下面的函數，但它無法找到它。

function toggleSidebar() { 
 
    document.getElementById("sidebar").classList.toggle('active'); 
 
}

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    font-family: sans-serif; 
 
} 
 

 
#sidebar { 
 
    position: fixed; 
 
    width: 200px; 
 
    height: 100%; 
 
    background: #727e87; 
 
    left: -200px; 
 
    transition: all 250ms linear; 
 
} 
 

 
#sidebar.active { 
 
    left: 0px; 
 
} 
 

 
#sidebar ul li { 
 
    color: rgba(230, 230, 230, 0.9); 
 
    list-style: none; 
 
    padding: 15px 10px; 
 
    border-bottom: 1px solid rgba(100, 100, 100, 0.3); 
 
} 
 

 
#sidebar .toggle-btn { 
 
    position: absolute; 
 
    left: 230px; 
 
    top: 20px; 
 
} 
 

 
#sidebar .toggle-btn span { 
 
    display: block; 
 
    width: 30px; 
 
    height: 5px; 
 
    background: #727e87; 
 
    margin: 5px 0px; 
 
}

<div id="sidebar"> 
 
    <div class="toggle-btn" onclick="toggleSidebar()"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    </div> 
 
    <ul> 
 

 
    <li>Home </li> 
 
    <li>Contact </li> 
 
    <li>About </li> 
 

 
    </ul>