Question

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

</html>

我已使用重置功能清除了上述表格。这是分开的，但我只需要使用类名清除上面的表单...我在上面的代码中做的错误在哪里？请帮帮我！

Answer 1

document.getElementsByClassName返回一个列表。如果您确定只有1个带有该类名的元素，那么只需从该列表中获取第一个元素。

var a = document.getElementsByClassName("abc")[0];

Answer 2

使用此代码并不重要，您拥有相同类名的元素数量。

<script>
    function myfun()
    {
        var a = document.getElementsByClassName('abc');

        for (var i = 0; i < a.length; i++) {
            a[i].value = "";
        }

        var b = document.getElementsByClassName('def');

        for (var i = 0; i < b.length; i++) {
            b[i].value = "";
        }
    }
</script>

Working DEMO

如果你只有一个具有相同类名的元素，那么这里是没有循环的代码：

<script>
    function myfun()
    {
        var a = document.getElementsByClassName('abc');
        a[0].value = "";

        var b = document.getElementsByClassName('def');
        b[0].value = "";
    }
</script>

WORKING DEMO

Answer 3

如果您只有一个包含abc和def类名称的元素，则可以执行以下操作：

function myfun()
{
    document.getElementsByClassName('abc')[0].value = '';
    document.getElementsByClassName('def')[0].value = '';
}

Code in Plunker

如果要重置所有字段的值，可以使用以下内容：

<input type="reset" value="clear">

Answer 4

document.getElementsByClassName（＆＃39; abc＆＃39;）返回匹配类的对象（数组），因此您可能必须指定您在该对象（数组）中引用的类的位置

试试这个：

function myFunction()
    {
        var a = document.getElementsByClassName('abc')[0];
        a.value = "";
        var b = document.getElementsByClassName('def')[0];
        b.value = "";
    }

Working Demo

为什么我无法使用Javascript中的类清除表单

4 个答案: