如何创建一个询问您是否确定要重置的重置按钮答案

【问题标题】：How to create a reset button which asks if you are sure to reset如何创建一个询问您是否确定要重置的重置按钮
【发布时间】：2021-05-04 06:09:13
【问题描述】：

我想创建一个重置按钮来确认重置它似乎不起作用。

function clear() {
  if (confirm("Are you sure you want to reset the form?")) {
    document.getElementById("form-main").reset();
  } else {
    alert("You are safe!");
  }
navigator.vibrate([500,500,500,1000,500,500,500]);
}

<form id="form-main"></form>
<button type="button" id="reset" onclick="clear();">Reset info</button>

你能告诉我哪里出错了吗？谢谢！

【问题讨论】：

通过正确缩进代码并使用空格而不是将所有内容都塞进一个不可读的混乱中，我们可以清楚地看到您的 JS 代码最后缺少右大括号。如果这不仅仅是复制和粘贴错误。
是的，我实际上在下面有一个navigator.vibrate 函数，所以我忘了复制它。

标签： javascript forms reset

【解决方案1】：

问题是你的函数名是clear()。它调用已弃用的document.clear()

console.log(document.clear)

因此，将函数名称更改为其他名称。

function clearForm() {
  if (confirm("Are you sure you want to reset the form?")) {
    document.getElementById("form-main").reset();
  } else {
    alert("You are safe!");
  }
}

<form id="form-main"><input type="text"></form>
<button type="button" id="reset" onclick="clearForm();">Reset info</button>

P.S：请使用addEventListeners 而不是使用内联事件处理程序

【讨论】：

【解决方案2】：

你没有关闭最后一个}

document.getElementById('reset').addEventListener('click', clearForm);

function clearForm() {
  if (confirm("Are you sure you want to reset the form?")) {
    document.getElementById("form-main").reset();
  } else {
    alert("You are safe!");
  }
}

<form id="form-main">
  <input type='text'>
</form>
<button type="button" id="reset">Reset info</button>

建议你使用addEventListener而不是使用onclick函数

好问题：

-addEventListener vs onclick

【讨论】：

如果您确定它只是缺少大括号，则不应回答此问题，而是将其标记为错字。
通常是的，但我想通过指定使用 addEventListener 而不是 onclick 来增加问题的价值
显然如果错了，我会删除并关闭问题。
它可以工作，但现在我的表单不会重置。
为什么投反对票？这也是一个很有可能的答案。代码没有缩进，OP 很可能漏掉了一个大括号

【解决方案3】：

id="reset" 出现问题，它与函数 reset() 混淆。

function clearForm() {
  if (confirm("Are you sure you want to reset the form?")) {
    document.getElementById("form-main").reset();
  } else {
    alert("You are safe!");
  }
}

<form id="form-main"><input type="text"></form>
<button type="button" id="resets" onclick="clearForm();">Reset info</button>

【讨论】：