javascript - 如何在没有表单的情况下使我的重置按钮在 HTML 中工作？

Question

这是我的代码

我曾尝试使用带有 onClick 的 javascript，但我的提交按钮将不起作用。然后我尝试将其更改为普通按钮，它仍然无法正常工作。我尝试将其放入表单中，但仍然无法正常工作。所以，我不知道如何为我的表单重置按钮。这是我的学校作业，我还是个学生，所以请帮助我。我非常感谢你的帮助。

Answer 1

你应该使用javascript重置你的inputs

注意：请记住，使用表单时 Enter 键也可以使用

<div>
    <div id="like-form">
        <input type="text" placeholder="Name" />
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Password" />
    </div>

    <button type="button" id="like-reset">
        Reset
    </button>
</div>

您可以Ajax用来提交信息，但要reset

document.getElementById("like-reset").addEventListener("click" () => {

    // forEach
    [].slice.call(document.getElementById("like-form").children).forEach(input => {
        input.value = "";
    });

    // For
    const inputs = document.getElementById("like-form").children;
    for (let i = 0; i < inputs.length; i++) {
        inputs[i].value = "";
    }
});

Answer 2

表单类型：重置和提交需要上下文。我的意思是你必须将所有输入包装在一个表单中。<form>....</from>. 然后 reset 有上下文来重置他的上下文/表单中的所有字段。

否则，如果您不想使用表单，您可以通过 Javascript 来完成。

function reset() {
  document.getElementById('input_1').value = ''
  document.getElementById('input_2').value = ''
}

<input id="input_1" value="Hello"><br/>
<input id="input_2" value="World">

<br/>
<button onclick="reset()">RESET</buton>

Answer 3

您应该在表单内设置所有输入和重置按钮。像这样：

<form>
  <input type="text">
  <input type="reset" value="Reset">
</form>

这样它应该工作。