ボタンがクリックされたときに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である可能性があります。