Javascript嘗試在Ruby中隱藏和顯示錶單時不工作

Question

Iam嘗試創建一個按鈕，該按鈕在用戶單擊它時顯示一個表單。我已經嘗試檢查我的代碼，並且我沒有發現任何錯誤，但該按鈕不起作用。請幫忙！

//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>