Question

当我输入文本框的值时，必须是＆＃34;＆＃34;而且颜色必须是红色。我必须对三个文本框使用相同的功能。当我使用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个文本框的值都是＆＃34;＆＃34;。我只想关注一个文本框。这就是我改变了：

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";
            }
        }

Answer 1

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

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

Answer 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>

我使用document.getelementsbyclassname错了吗？

2 个答案: