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>