如何让javascript重置表单？

为什么不清除表单内容？我尝试应用我在参考资料中看到的格式，其他一切都很好

此时的重置按钮完成了除清除输入字段之外的所有操作。我在DevTools中没有发现错误

  <form id="myForm" onsubmit="return valfunc()" onreset="return resetfunc()" ;>
          <div class="container">
            <div id="usrnm">
              <label class="control-label">Username: </label>
              <input class="form-control" type="text" name="username" id="username">
            </div>
            <div id="pswrd">
              <label class="control-label">Password: </label>
              <input class="form-control" type="password" name="password" id="password">
            </div>
            <div id="cnfrm">
              <label class="control-label">Confirm: </label>
              <input class="form-control" type="password" name="confirm" id="confirm">
            </div>
            <div id="ag">
              <label class="control-label">Age: </label>
              <input class="form-control" align:"right" type="text" name="age" id="age"> <br>
            </div>
          </div>

           <div class="buttons">
            <input type="submit" id="submit" class="btn btn-primary" onsubmit="valfunc();">
            <input type="reset" id="resetbutton" class="btn btn-default" onreset="resetfunc()">
           </div>
        </form>

用户名：
密码：
确认：
年龄：

以下是我的职责：

    <script>
        function resetfunc(){
          var form = document.getElementById("myForm");
          form.reset();
          document.getElementById("output").innerHTML = "";
          document.getElementById("cnfrm").className.clear;
          document.getElementById("output").style.visibility = "hidden";
          return false;
    </script>

函数resetfunc（）{
var form=document.getElementById（“myForm”）；
form.reset（）；
document.getElementById（“输出”）.innerHTML=“”；
document.getElementById（“cnfrm”）.className.clear；
document.getElementById（“输出”）.style.visibility=“隐藏”；
返回false；

您不需要JS来重置表单，只需将重置按钮替换为：

<button type="reset" value="Reset">Reset</button>

重置

删除表单标记中的

onreset=“return resetfunc（）”

，只需在onsubmit处理程序中进行清理（form.reset（）等）。

主要问题是

return false

将取消

重置

事件，而您不希望这样做，所以删除该行

此外，在函数末尾没有结束符

}

，函数引用了HTML和

类名中不存在的
输出
元素。清除
应为
类名=“
”

最后，您不应该首先使用内联HTML事件属性（
onreset
，
onclick
，等等）。20多年前事件处理就是这样做的，因为有这么多人只是复制别人的HTML，所以这种技术的使用不会消亡。有。相反，您应该遵循现代标准和最佳实践。将HTML与JavaScript完全分离，并使用
.addEventListener（）
注册事件

我已经按照这些现代标准更新了你的代码


//获取您需要使用的所有DOM元素引用，只需一次：
const form=document.getElementById（“myForm”）；
const output=document.getElementById（“输出”）；
const cnfrm=document.getElementById（“cnfrm”）；
//注册事件处理程序
表格。附录列表（“提交”，valfunc）；
格式.addEventListener（“重置”，resetfunc）；
函数valfunc（）{
//在此提交代码
}
函数resetfunc（）{
form.reset（）；
document.getElementById（“输出”）.innerHTML=“”；
cnfrm.className=“”；
document.getElementById（“输出”）.style.visibility=“隐藏”；
}

用户名：
密码：
确认：
年龄：


test
在您的代码中有一些小东西，例如“}”和“；”，您需要修复它们才能使resetfunc（）正常工作。看一看


用户名：
密码：
确认：
年龄：


函数resetfunc（）{
var form=document.getElementById（“myForm”）；
form.reset（）；
//document.getElementById（“输出”）.innerHTML=“”；
//document.getElementById（“cnfrm”）.className.clear；
//document.getElementById（“输出”）.style.visibility=“隐藏”；
console.log（“resetfunc”）；
返回false；
}

您将看到控制台输出“resetfunc”。如果天气转晴，请告诉我
 id为“output”的元素在哪里？您确定没有因为
.className.clear看起来一点也不对劲。安迪，对不起，是的，我刚才删除了它，就像我之前应该删除的那样。仍然不工作…ID输出的元素位于bodyreturn的另一部分中，返回
true
，因为您当前正在取消重置。请解释否决票，因为这是正确的答案。我发现与2没有区别，两者都允许程序工作，除了清除表单。我也没有投反对票you@ScottMarcus我认为
className.clear
应该是
className=''
。您仍然在引用完整的表单
文档.getElementById（“output”）
。以后我将尝试像这样清理我的代码。谢谢。@Peter您还应该删除
align:“right”
（这是无效的）并使用CSS（不再有align属性）。
resetfunc
做的更多。这很有效！非常感谢。您能向我解释一下这个错误的原因吗？您似乎正在侦听表单上的onreset事件，然后正在执行.reset（）。想想看，当事件“onreset”触发时，您正在重置表单。重置表单是触发重置事件的原因。
<form id="myForm" onsubmit="return valfunc()" onreset="return resetfunc()">
          <div class="container">
            <div id="usrnm">
              <label class="control-label">Username: </label>
              <input class="form-control" type="text" name="username" id="username">
            </div>
            <div id="pswrd">
              <label class="control-label">Password: </label>
              <input class="form-control" type="password" name="password" id="password">
            </div>
            <div id="cnfrm">
              <label class="control-label">Confirm: </label>
              <input class="form-control" type="password" name="confirm" id="confirm">
            </div>
            <div id="ag">
              <label class="control-label">Age: </label>
              <input class="form-control" align:"right" type="text" name="age" id="age"> <br>
            </div>
          </div>

           <div class="buttons">
            <input type="submit" id="submit" class="btn btn-primary" onsubmit="valfunc()">
            <input type="reset" id="resetbutton" class="btn btn-default" onreset="resetfunc()">
           </div>
        </form>

function resetfunc(){
          var form = document.getElementById("myForm");
          form.reset();
          //document.getElementById("output").innerHTML = "";
          //document.getElementById("cnfrm").className.clear;
          //document.getElementById("output").style.visibility = "hidden";
          console.log("resetfunc");
          return false;
}