Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to change the color of a button when the input field is filled – JavaScript?

Javascript Web Development Front End Technology Object Oriented Programming

In JavaScript, you can change a button's color dynamically when an input field is filled by using event listeners and checking the input's value. This creates an interactive user interface that responds to user input in real-time.

Basic HTML Structure

First, let's set up the HTML elements we'll be working with:

<input type="text" id="inputField" placeholder="Type something...">
<button id="myButton">Press Me</button>

Using onkeyup Event

The onkeyup event triggers every time a key is released in the input field, allowing us to check the input's value and update the button color accordingly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Button Color</title>
</head>
<body>
    <label for="inputField">Username:</label>
    <input type="text" id="inputField" placeholder="Type something..." 
           onkeyup="changeButtonColor()" style="margin-left: 10px;">
    <br><br>
    <button id="myButton" style="background-color: lightgray; padding: 10px; margin-left: 10px;">
        Press Me
    </button>

    <script>
        function changeButtonColor() {
            const input = document.getElementById("inputField");
            const button = document.getElementById("myButton");
            
            if (input.value.trim() !== "") {
                button.style.backgroundColor = "green";
                button.style.color = "white";
            } else {
                button.style.backgroundColor = "lightgray";
                button.style.color = "black";
            }
        }
    </script>
</body>
</html>

Using addEventListener (Modern Approach)

A more modern approach uses addEventListener to separate HTML and JavaScript, making the code more maintainable.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Color Change</title>
</head>
<body>
    <label for="textInput">Enter text:</label>
    <input type="text" id="textInput" placeholder="Start typing..." style="margin-left: 10px;">
    <br><br>
    <button id="actionButton" style="background-color: #f0f0f0; padding: 10px 20px; margin-left: 10px;">
        Submit
    </button>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const input = document.getElementById('textInput');
            const button = document.getElementById('actionButton');
            
            input.addEventListener('input', function() {
                if (this.value.trim().length > 0) {
                    button.style.backgroundColor = '#4CAF50';
                    button.style.color = 'white';
                    button.style.cursor = 'pointer';
                } else {
                    button.style.backgroundColor = '#f0f0f0';
                    button.style.color = '#333';
                    button.style.cursor = 'default';
                }
            });
        });
    </script>
</body>
</html>

Multiple Color States

You can create more sophisticated color changes based on input length or content validation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Button Color Change</title>
</head>
<body>
    <label for="passwordInput">Password:</label>
    <input type="password" id="passwordInput" placeholder="Enter password..." style="margin-left: 10px;">
    <br><br>
    <button id="submitButton" style="padding: 10px 20px; margin-left: 10px;">
        Create Account
    </button>

    <script>
        document.getElementById('passwordInput').addEventListener('input', function() {
            const password = this.value;
            const button = document.getElementById('submitButton');
            
            if (password.length === 0) {
                // Empty - gray
                button.style.backgroundColor = '#cccccc';
                button.style.color = '#666';
            } else if (password.length < 6) {
                // Too short - red
                button.style.backgroundColor = '#ff4444';
                button.style.color = 'white';
            } else if (password.length < 10) {
                // Moderate - orange
                button.style.backgroundColor = '#ff8800';
                button.style.color = 'white';
            } else {
                // Strong - green
                button.style.backgroundColor = '#00cc44';
                button.style.color = 'white';
            }
        });
    </script>
</body>
</html>

Key Points

  • Use onkeyup or input events to detect changes in real-time
  • Check if input.value.trim() !== "" to handle empty strings and whitespace
  • Access button styles via element.style.backgroundColor
  • The input event is more comprehensive than keyup as it captures paste, drag-and-drop, and other input methods

Comparison of Event Types

Event Triggers On Best For
onkeyup Key release Keyboard input only
oninput Any value change All input methods (recommended)
onchange Focus loss after change Final validation

Conclusion

Changing button colors based on input field state enhances user experience by providing visual feedback. Use the input event with addEventListener for the most robust solution that handles all input methods.

Updated on: 2026-03-15T23:19:00+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements