當點擊按鈕時，JavaScript不會觸發

Question

我想讓按鈕讓一個div彈出，但目前我正面臨一個問題。問題在於，當您單擊按鈕時，類「切換」未被切換。

這裏是我的標記：

​​

和我的JS：

function toggle(){ 

     var bottom-bar = document.querySelector('.bottom-bar'); 
       bottom-bar.classList.toggle('toggle'); 

    }   

    var button = document.querySelector('.bottom-bar_toggle-button'); 

    button.addEventListener('click', toggle); 

，我的造型：

.bottom-bar { 
    position: fixed; 
    bottom: 0; 
    width: 76%; 
    margin: 0 12%; 
    background-color: #FFFFFF; 
    padding: 25px; 
    border-radius: 5px 5px 0 0; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } 
    .bottom-bar .toggle { 
    height: 100vh; 
    top: 10%; } 

.toggle { 
    height: 100vh; 
    top: 10%; } 

.bottom-bar_top-info { 
    text-align: center; } 
    .bottom-bar_top-info span { 
    opacity: 0.54; } 

.bottom-bar_toggle-button { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: transparent; 
    border: 0px; 
    outline: 0px; 
    margin: 16px; 
    padding: 8px; 
    cursor: pointer; } 

這裏是通過CodePen一個活生生的例子：http://codepen.io/ZoidCraft/pen/NRBOqb

Answer 1

bottom-bar不是有效的變量名稱。嘗試bottomBar。

codepen

Answer 2

正如你可以在你的筆看到，變量名產生一個錯誤。嘗試將變量bottom-bar重命名爲bottomBar，然後運行。

Answer 3

如果您想擁有自己的風格，請使用下劃線（_）而不是短劃線（ - ）。

變量可能是bottom_bar而不是bottom-bar。