Question

我正在跟踪在线教程（https://www.devwalks.com/ruby-on-rails-tutorial-lets-build-basecamp-2/)and，直到碰到JavaScript代码为止，一切都进行得很好。我对javascript知之甚少。我正在尝试使用js来显示和隐藏弹出窗口。表单。浏览器中没有错误。当我单击新按钮时，没有任何反应。不确定是否与未在我的JavaScript代码中加载Turbolink有关。我们将不胜感激。

index.html

  <div class="row home-header">
    <div class="col-md-1 mr-auto">
      <button id="new-project-button" class="btn btn-primary mr-auto">New</button>
      <div 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>
    <div class="col-md-4">
      <h3 class="text-center">Projects</h3>
    </div>
    <div class="col-md-1 ml-auto">
      <button class="btn ml-auto">...</button>
    </div>
  </div>
  <div class="row home-projects">
    <div class="col-md-4 project-col">
      <a href="#" class="project-card">
        <h4>Dummy Project</h4>
        <p>WHat a wonderful project this will be!</p>
      </a>
    </div>
    <div class="col-md-4 project-col">
      <a href="#" class="project-card">
        <h4>Wondeful Project</h4>
        <p>This will be a most wonderful project</p>
      </a>
    </div>
    <div class="col-md-4 project-col">
      <a href="#" class="project-card">
        <h4>Yet another project</h4>
        <p>Busy, busy!</p>
      </a>
    </div>
    <div class="col-md-4 project-col">
      <a href="#" class="project-card">
        <h4>Lucky fourth project</h4>
        <p>There has never been a lucker project than this one</p>
      </a>
    </div>
  </div>
</main>

project.js

document.addEventListener('turbolinks:load', function() {

  const openProjectButton = document.getElementById('new-project-button')
  const projectPopover = document.getElementById('new-project-popover')


  if (openProjectButton && projectPopover) {
    openProjectButton.addEventListener('click', function () {

      return projectPopover.classList.contains('is-hidden') ?
      projectPopover.classList.remove('is-hidden') : null
    }, false)

    const cancelProjectPopover = document.getElementById('cancel-project-popover')
    cancelProjectPopover.addEventListener('click', function () {

      return projectPopover.classList.add('is-hidden')
    }, false)
  }
})

如何获取JavaScript以使用Popover表单？

0 个答案: