javascript click button to change text color

With the continuous development of the Internet and web design, JavaScript has become an essential part of front-end development. Its powerful functions and flexibility can make web pages more interactive and dynamic. In this article, we will learn how to change the text color of a button using JavaScript.

1. Create a button in HTML
First, create a button label in HTML and name it "changeColorBtn":

Click to change the text color

2. Use JavaScript to change the color
Next, we need to use JavaScript to write a function to change the text color. In JavaScript, we can use the document.getElementById() method to get the button element by id. We can then use the style.color property to change the text color. Here is a code example:

function changeTextColor() {
var btn = document.getElementById("changeColorBtn");
btn.style.color = "red";
}

In this example, we define a variable named "btn" in the function and assign it a reference to the "changeColorBtn" element. We then use the style.color property to change the button's text color to red.

3. Change the background color of the button
It should be noted that we cannot change the background color of the button just through the above method. In JavaScript, we can use the style.backgroundColor property. The following is a code example:

function changeBackgroundColor() {
var btn = document.getElementById("changeColorBtn");
btn.style.backgroundColor = "blue";
}

In this example, we change the button's background color to blue by changing style.color to style.backgroundColor.

4. Use random colors
If we want to change the text and background color of the button to a random color, we can use JavaScript's Math.random() method in the function to generate a random color. Here is a code example:

function changeRandomColor() {
var btn = document.getElementById("changeColorBtn");
var letters = "0123456789ABCDEF";
var color = "#" ;
for (var i = 0; i < 6; i ) {

color += letters[Math.floor(Math.random() * 16)];

}
btn.style.color = color;
btn.style.backgroundColor = color;
}

In this example, we define three variables in the function: btn, letters and color. We then use a for loop to generate a six-bit random color value. Finally, we assign random color values ​​to the style.color and style.backgroundColor properties respectively.

5. Summary
Through the above steps, we can use JavaScript to change the text color, background color, and even generate random colors of the button. Through JavaScript, we can make web pages more interactive and dynamic.

The above is the detailed content of javascript click button to change text color. For more information, please follow other related articles on the PHP Chinese website!