未捕获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>