Download Article
Download Article
This article was co-authored by wikiHow staff writer, Darlene Antonelli, MA. Darlene has been writing and editing tech content at wikiHow since 2019. She previously worked for AppleCare, served as a writing tutor, volunteered in IT at an animal rescue, and taught as an adjunct professor for EN101 and EN102. Darlene has completed Coursera courses on technology, writing, and language. She holds both a BA (2011) and an MA (2012) from Rowan University in Writing, with a focus on workplace communication. With her extensive experience, academic background, and ongoing learning, Darlene has become the go-to grammar expert for her friends and family, as well as a skilled wordsmith for anyone in need.
This article has been viewed 31,325 times.
Learn more...
This wikiHow article will teach you how to change the button color once it's clicked using JavaScript. Changing the button color lets users know that they have already clicked the button on your page.
Steps
Download Article
-
Open your project in a Java-editing environment. This can be anything like Visual Studio or Oracle JDeveloper. -
Enter the following code into your program to change the button's color with onclick:<script> document.getElementById("changeGreen").onclick = function(){ document.getElementById("output").style.color = 'green'; } document.getElementById("changeRed").onclick = function(){ document.getElementById("output").style.color = 'red'; } </script>
- This code prompts the buttons to change the color of your text from green to red. You can replace these colors with others you prefer.
Advertisement -
Enter the following code into your program if you want to change the button's color when a text field is filled in:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <body> <label> UserName: </label> <input type="text" id="changeColorDemo" style="margin-left:10px;margin-top:10px" onkeyup="changeTheColorOfButtonDemo()"> <br><br> <button id="buttonDemo" style="background:skyblue;margin-left:10px;">Press Me</button> </body> <script> function changeTheColorOfButtonDemo() { if (document.getElementById("changeColorDemo").value !== "") { document.getElementById("buttonDemo").style.background = "green"; } else { document.getElementById("buttonDemo").style.background = "skyblue"; } } </script> </html>
- Using an <IF/ELSE> statement, the button is skyblue until the input field is filled, then it changes to a green button.
- If you want to change the colors, you can either use color names like "Green" or "Skyblue," Hexadecimal numbers (which you can find by searching Hexadecimal colors), or RGB colors (which you can also find by a simple internet search). To change the colors in the code, replace the "green" and "skyblue" colors in the code style.background.
Expert Q&A
Tips
About This Article
1. Open your project in a Java-editing environment.
2. Enter the following code into your program to change the button's color with "onclick."
3. Enter the following code into your program if you want to change the button's color when a text field is filled in.
Is this article up to date?
