Question

<!DOCTYPE html>
<html>
<head>
    <title>Onreset-3</title>
</head>
<body>
    <form>
        Username: <input type="text" class="abc"><br><br>
        Password: <input type="password" class="abc"><br><br>
    </form>
    <input type="button" onclick="reset()" value="Clear">
    <script>
        function reset()
        {
            var a = document.getElementsByClassName('abc');
            a.value = "";
        }
    </script>
</body>
</html>

我无法清除上述表单中的用户名和密码。我一直在尝试使用id但没有用

Answer 1

原生重置更好，完美无缺

    <form>
        Username: <input type="text" class="abc"><br><br>
        Password: <input type="password" class="abc"><br><br>
    </form>
    <input type="button" onclick="reset()" value="Clear">
    <script>
        function reset()
        {
            document.getElementsByTagName("form")[0].reset();
        }
    </script>

Answer 2

在您的代码中：

document.getElementsByClassName('abc');

返回具有全部子元素的所有子元素的类数组对象给定的类名。

MDN: getElementsByClassName

结果值为HTMLCollection。

在这种情况下，我们可以迭代集合。

使用Javascript使用HTMLCollection：

<!DOCTYPE html>
<html>

<head>
  <title>Onreset-3</title>
</head>

<body>
  <form>
    Username:
    <input type="text" class="abc">
    <br>
    <br>Password:
    <input type="password" class="abc">
    <br>
    <br>
  </form>
  <input type="button" onclick="reset()" value="Clear">
  <script>
    function reset() {
      var a = document.getElementsByClassName('abc');
      // a = HTMLCollection
      console.log(a);
      // You can iterate over HTMLCollection.
      for (var i = 0; i < a.length; i++) {
        // You can set the value in every item in the HTMLCollection.
        a[i].value = "";
      }
    }
  </script>
</body>

</html>

没有Javascript

但是，您的表单可以完美地使用重置按钮。 <input type="reset" value="Clear">必须位于表单标记内。

这样的事情：

<!DOCTYPE html>
<html>

<head>
  <title>Onreset-3</title>
</head>

<body>
  <form>
    Username:
    <input type="text" class="abc">
    <br>
    <br>Password:
    <input type="password" class="abc">
    <br>
    <br>
    <input type="reset" value="Clear">
  </form>

</body>

</html>

其他信息：

HTMLFormElement.reset() ：The HTMLFormElement.reset()方法恢复表单元素的默认值。这种方法也是如此   单击表单的重置按钮。

如果表单控件（例如重置按钮）的名称或ID为reset   它会掩盖表单的重置方法。它不会重置其他   输入中的属性，例如disabled。

<强>用法：
document.getElementById("myform").reset();

HTMLFormElement.reset()

我无法清除表格

2 个答案: