Change text input color and Enable/Disable text input with JavaScript

by
Tiempo de lectura: 2 minutos

Reading time: 2 minutes

Good morning, colleagues. Today I have prepared a tutorial on how to perform a series of actions on a form using DOM in JavaScript to access form elements.

DOM (Document Object Model) allows dynamic access, modification, deletion, etc., of different elements in an HTML.

I’ll provide a very simple example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevCodeLight</title>
</head>
<body>
    <script>
    function changeOne(element){
        if(element.id=="red"){
            for(element of document.form.elements){
                if(element.type=="text"){
                    element.style.color="red";
                }
            }
        }
        if(element.id=="blue"){
            for(element of  document.form.elements){
                if(element.type=="text") {
                    element.style.color="blue";
                }
            }     
        }        
    }
        
    function changeTwo(element){
        
        if(element.id=="enable"){
            for(element of document.form.elements){
                if(element.type=="text") {
                    element.disabled=false;
                }
            }
        }
        if(element.id=="disable"){
            for(element of document.form.elements){
                if(element.type=="text") {
                    element.disabled=true;
                }
            }
        }
    }
        </script>
             <form name="form">
                Name: <input type="text" id="name" name="name" /><br>
                Last Name: <input type="text" id="lastName" name="lastName" /><br>
                Address: <input type="text" id="address" name="address" /><br>
                Phone: <input type="text" id="phone" name="phone" /><br>
                Age: <input type="text" id="age" name="age" /><br>
        
                <input type="button" value="Red Text" id="red" name="red" onclick="changeOne(this);" />
                <input type="button" value="Blue Text" id="blue" name="blue" onclick="changeOne(this);" />
                <input type="button" value="Enable" id="enable" name="enable" onclick="changeTwo(this);" />
                <input type="button" value="Disable" id="disable" name="disable" onclick="changeTwo(this);" />
            </form>
            <div id="myDiv"></div>
</body>
</html>

What we do is as follows:

The function function changeOne(element) handles the text color. We specify that if the id of the input element we created below is “red“, it should go through the entire document and the form elements, and then we specify that if the element is of type “text“, change the style property of the text element to red. The same goes for changing the text to blue.

In the case of the function function changeTwo(element), it handles the text inputs. We specify that if the id of the input element we created below is “enable“, it should go through the entire document and the form elements, and then we specify that if the element is of type “text“, enable the input element. The same goes for disabling the inputs, but evaluating the id “disable“.

In the HTML, we add the onclick attribute to the “button” input elements that are intended to perform the function. When the user clicks on the element, this event occurs, and it executes that particular function. That’s why we use onclick=”changeOne(this);” (e.g., the thisonclick=”changeTwo(this);.

I hope this helps you learn. See you in the next one! :slightly_smiling_face:

Post Views: 1

Leave a Comment