javascript - 按钮的onclick功能无法在form.javascript中工作

在我的代码中，addDvcPeople（）的onclick函数可以正常运行而无需使用表单。
但是，一旦添加表单，addDvcPeople（）的onclick函数就会失效。
这是没有形式的代码，可以正常工作：

<div class="dvcOnShlv" id="dvcOnShlv">
<!--<form action="modify_idc_addDVC.php?act=add&table=IDC" method="POST">-->
  <table border="1px" cellspacing="0"  id="staTable">
  <tr>
    <h2 align="center">IDCtable</h2>
  </tr>
  <tr>
  <td style="width:15%" id="addDvcWorker">engineer<br /><input type="button" id="addDvcPeople" onclick="addDvcPeople()" value="addpeople"></td>
  </tr>
 </table>
<!--</form>-->
</div>

我的addDvcPeople（）代码是：

<script>
 function addDvcPeople()
{
    alert("test");
}
</script>

添加“ form”语句后，函数addDvcPeople（）不会执行任何操作。
我不知道为什么。谁能帮助我？

最佳答案

您遇到的主要问题是为按钮赋予了与功能名称相同的ID。您需要确保它们不同，否则您的功能将始终以undefined的形式出现：

function addDvcPeople() {
  alert("test");
}

<form>
  <input type="button" id="addDvcPeople" onclick="addDvcPeople()" value="Button">
</form>

此处显示了使用其他ID的情况：

function addDvcPeople() {
  alert("test");
}

<form>
  <input type="button" id="addDvcPeopleID" onclick="addDvcPeople()" value="Button">
</form>

您将遇到的第二个问题是，即使没有submit输入，表单提交也具有默认情况下实际提交表单的默认行为，这意味着单击按钮后表单将消失：

function addDvcPeople() {
  alert("test");
}

<form>
  <button onclick="addDvcPeople()">Button</button>
</form>

要解决此问题，您需要通过event覆盖默认的表单提交：

function addDvcPeople(event) {
  event.preventDefault();
  alert("test");
}

<form>
  <button onclick="addDvcPeople(event)">Button</button>
</form>

请注意，在上面的示例中，页面没有刷新，并且显示警报。

希望这可以帮助！ :)