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

Question

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

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>

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

Answer 1

你没有关闭最后一个}

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

Answer 2

问题是你的函数名是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 而不是使用内联事件处理程序

Answer 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>

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

How to create a reset button which asks if you are sure to reset

javascript

forms

reset