我使用 document.getelementsbyclassname 错了吗？答案

【问题标题】：Am i using document.getelementsbyclassname wrong?我使用 document.getelementsbyclassname 错了吗？
【发布时间】：2015-05-23 13:08:37
【问题描述】：

当我输入文本框的值必须是“”并且颜色必须是红色。我必须对三个文本框使用相同的功能。当我使用 document.getelementsbyclassname() 时，我的功能将不起作用。难道我做错了什么？

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
    <link rel="stylesheet" href="styleDOMoef01.css" type="text/css"/>

    <title>DOMoef01</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script type="text/javascript">

        function roodVerdwijn(){
            document.getElementsByClassName('text1').value="";
            document.getElementsByClassName('text1').style.color = "Red";
            document.getElementsByClassName('text1').style.background = "White";
        }

        function gedaan(){
            document.getElementByClassName('text1').style.color = "Black";
            document.getElementByClassName('text1').style.background =   "Gray";
        }


    </script>
</head>
<body>
    <table>
        <tr>
            <td colspan="2">persoonlijke gegevens</td>
        </tr>
        <tr>
            <td>voornaam</td>
            <td><input type="text" value="voornaam" class="text1" onfocus="roodVerdwijn();" onblur="gedaan();"></td>
        </tr>
        <tr>
            <td>achternaam</td>
            <td><input type="text" value="achternaam" class="text1" onfocus="roodVerdwijn();" onblur="gedaan();"></td>
        </tr>
        <tr>
            <td>adres</td>
            <td><input type="text" value="adres" class="text1" onfocus="roodVerdwijn();" onblur="gedaan();"></td>
        </tr>
        <tr>
            <td><input type="button" value="verzenden"   onclick="window.alert('Bedankt om het formulier te verzenden')"></td>
            <td><input type="button" value="alles wissen"></td>
        </tr>
    </table>
</body>
</html>

我已尝试使用此代码修复它，但仍然无法正常工作：

function roodVerdwijn(){
            var elements = document.getElementsByClassName('text1');
            for(var i = 0 ; i<elements.length;i++){
                elements.value="";
                elements.style.color = "Red";
                elements.style.background = "White";
            }
        }

        function gedaan(){
            var elements2 = document.getElementsByClassName('text1');
            for(var i = 0 ; i<elements.length;i++){
            elements2.style.color = "Black";
            elements2.style.background = "Gray";
            }
        }

它有点帮助，但是当我专注于一个文本框时，所有 3 个文本框的值都是“”。我只想关注一个文本框。这是我改变的：

function roodVerdwijn(){
            var elements = document.getElementsByClassName('text1');
            for(var i = 0 ; i<elements.length;i++){
                elements[i].value="";
                elements[i].style.color = "Red";
                elements[i].style.background = "White";
            }
        }

        function gedaan(){
            var elements2 = document.getElementsByClassName('text1');
            for(var i = 0 ; i<elements.length;i++){
            elements2[i].style.color = "Black";
            elements2[i].style.background = "Gray";
            }
        }

【问题讨论】：

没有getElementByClassName，你在想getElement*s*ByClassName，它返回一个元素数组。
您需要索引到列表中才能获得正确的元素：elements[i].value = ""; 等

标签： javascript html

【解决方案1】：

通过类名获取元素返回一个元素数组。您必须循环每个元素，或者如果您确定您要查找的类只有一个元素，请使用 [0]。

document.getElementsByClassName('text1')[0].value ...

【讨论】：

是的，虽然严格来说它不是一个数组，它是一个活节点列表。

【解决方案2】：

我修好了：

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
    <link rel="stylesheet" href="styleDOMoef01.css" type="text/css"/>

    <title>DOMoef01</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script type="text/javascript">

        function roodVerdwijn(id){
            var elements = document.getElementById(id);

                elements.value="";
                elements.style.color = "Red";
                elements.style.background = "White";

        }

        function gedaan(id){
            var elements2 = document.getElementById(id);

            elements2.style.color = "Black";
            elements2.style.background = "Gray";

        }




    </script>
</head>
<body>
    <table>
        <tr>
            <td colspan="2">persoonlijke gegevens</td>
        </tr>
        <tr>
            <td>voornaam</td>
            <td><input type="text" value="voornaam" id="1" onfocus="roodVerdwijn(this.id);" onblur="gedaan(this.id);"></td>
        </tr>
        <tr>
            <td>achternaam</td>
            <td><input type="text" value="achternaam" id="2" onfocus="roodVerdwijn(this.id);" onblur="gedaan(this.id);"></td>
        </tr>
        <tr>
            <td>adres</td>
            <td><input type="text" value="adres" id="3" onfocus="roodVerdwijn(this.id);" onblur="gedaan(this.id);"></td>
        </tr>
        <tr>
            <td><input type="button" value="verzenden" onclick="window.alert('Bedankt om het formulier te verzenden')"></td>
            <td><input type="button" value="alles wissen"></td>
        </tr>
    </table>
</body>
</html>

【讨论】：