javascript - 单击按钮而不刷新整个页面

Question

我正在使用 Flask 框架制作一个信息检索系统。

我试图在单击名称时弹出一个 div。现在我正在遍历一个名称列表并将它们作为按钮并排输出。但是，当我点击一个按钮时，我想要一个 div 从该按钮下拉。但是，每次我单击该按钮时，它都会刷新页面并删除我所有输出的名称。现在甚至没有调用 myDiv 函数。如何在不删除所有其他输出的情况下让 div 出现在我按下的按钮下方？

// actions.js
function myDiv(name) {
    var x = document.getElementById(tag);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

<form class="form-inline" action="">
  {% if output %}
  <h2>Top names to use</h2>
    {% for name in output %}
    <div class="output-container">
      <button onclick="myDiv({{name}})" id={{name}} class="btn btn-info">{{name}}</button>
     </div>
    {% endfor %}
  {% endif %}
</form>
<script type="text/javascript" src="/static/js/actions.js"></script>

Answer 1

默认情况下，按钮 的类型是submit。您必须将其隐式更改为 button:

<button type="button" onclick="myDiv({{name}})" id={{name}} class="btn btn-info">{{name}}</button>