CODEWITHSUNDEEP
javascripthtml
Charles Schoofs
Charles Schoofs

Reputation: 23

Am i using document.getelementsbyclassname wrong?

When I enter the value of the textbox has to be "" and the color has to be red. I have to use the same function for three textboxes. When I use document.getelementsbyclassname() my function won't work. Am I doing something wrong? 

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

I've tried to fix it with this code but it still won't work:

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

it kinda helped, but when I focus on one textbox, the value of all 3 textboxes are "". I want to focus on only one textbox. This is what i've changed:

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

Upvotes: 0

Views: 649

Answers (2)

Charles Schoofs
Charles Schoofs

Reputation: 23

I fixed it :

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

Upvotes: 0

Luca Colonnello
Luca Colonnello

Reputation: 1456

Get elements by class name returns an array of element. You have to loop each element or if you are sure that there's only one element for the class you have look for, use [0].

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

Upvotes: 5

Related Questions