Javascript Rubyでフォームを非表示にして表示しようとしていません

Question

ユーザーがフォームをクリックしたときにフォームを表示するボタンを作成しようとしています。私は私のコードをチェックしようとしたが、私はエラーが見つかりませんでしたが、ボタンが機能しません。助けてください！

//load turbo scripts 
 

 
document.addEventListener('turbolinks:load', function() { 
 
    //assign elements in to variables 
 
    const openProjectButton = document.getElementById('new-project-button') 
 
    const projectPopover = document.getElementById('new-project-popover') 
 

 

 
    //check if elements exist 
 

 
    if (openProjectButton && projectPopover) { 
 
    //attach listener 
 
    openProjectButton.addEventListener('click', function() { 
 
     //if the popover class contains is-hidden remove it else return nill. 
 
     return projectPopover.classList.contains('is-hidden') ? projectPopover.classList.remove('is-hidden') : null 
 
    }, false) 
 

 
    //attach listener to cancel button 
 

 
    const cancelProjectpopover = document.getElementById('cancel-project-popover') 
 
    cancelProjectpopover.addEventListener('click', function() { 
 
     //add back is-hidden 
 
     return projectPopover.classList.add('is-hidden') 
 
    }, false) 
 
    } 
 
})

<div class="col-md-1 mr-auto"> 
 
    <button id="new-project-button" class="btn btn-primary mr-auto">New</button> 
 
    <div id="new-project-popover" class="project-popover is-hidden"> 
 
    <div class="form-group"> 
 
     <input type="text" placeholder="Name this project" class="form-control"> 
 
    </div> 
 
    <button type="submit" class="btn btn-success">Save</button> 
 
    <button id="cancel-project-popover" class="btn btn-secondary">Cancel</button> 
 
    </div> 
 
</div>

Answer 1

あなたは外側のイベント'turbolinks:load'が全く解雇されていることを確認していますか？私はそのイベントリスナーを削除すると、すべてはそれが必要として動作するので：

//assign elements in to variables 
 
const openProjectButton = document.getElementById('new-project-button') 
 
const projectPopover = document.getElementById('new-project-popover') 
 

 

 
//check if elements exist 
 

 
if (openProjectButton && projectPopover) { 
 
    //attach listener 
 
    openProjectButton.addEventListener('click', function() { 
 
    //if the popover class contains is-hidden remove it else return nill. 
 
    return projectPopover.classList.contains('is-hidden') ? projectPopover.classList.remove('is-hidden') : null 
 
    }, false) 
 

 
    //attach listener to cancel button 
 

 
    const cancelProjectpopover = document.getElementById('cancel-project-popover') 
 
    cancelProjectpopover.addEventListener('click', function() { 
 
    //add back is-hidden 
 
    return projectPopover.classList.add('is-hidden') 
 
    }, false) 
 
}

.is-hidden { 
 
    display: none; 
 
}

<div class="col-md-1 mr-auto"> 
 
    <button id="new-project-button" class="btn btn-primary mr-auto">New</button> 
 
    <div id="new-project-popover" class="project-popover is-hidden"> 
 
    <div class="form-group"> 
 
     <input type="text" placeholder="Name this project" class="form-control"> 
 
    </div> 
 
    <button type="submit" class="btn btn-success">Save</button> 
 
    <button id="cancel-project-popover" class="btn btn-secondary">Cancel</button> 
 
    </div> 
 
</div>