Change Text Color On Click Using JavaScript | Bobbyhadz

Trang chủ » Html Color Text Javascript » Change Text Color On Click Using JavaScript | Bobbyhadz

Có thể bạn quan tâm

# Table of Contents

  1. Change the document's text color on click
  2. Change the element's text color on click
  3. Change another element's text color on click

# Change the document's text color on click

To change the document's text color on click:

  1. Add a click event listener to an element.
  2. Each time the element is clicked, set the document.body.style.color property to a specific color.
  3. The text color change will be global unless overridden.

Here is the HTML for the example.

index.htmlCopied!<!DOCTYPE html> <html lang="en"> <head> <title>bobbyhadz.com</title> <meta charset="UTF-8" /> </head> <body> <div>Some text here</div> <button id="btn">Button</button> <script src="index.js"></script> </body> </html> The code for this article is available on GitHub

And here is the related JavaScript code.

index.jsCopied!const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { // 👇️ Change text color globally document.body.style.color = 'darkgreen'; // 👇️ Change text color for clicked element only // event.target.style.color = 'salmon'; });

change document text color on click

The code for this article is available on GitHubWe added a click event listener to the button, so a function is invoked every time the button is clicked.

Each time the button is clicked, we set the document.body.style.color property to darkgreen and change the text color globally.

# Change the element's text color on click

To change an element's text color on click:

  1. Add a click event listener to the element.
  2. Assign the event object to a variable in the function.
  3. Set the event.target.style.color property to the specific text color.
index.jsCopied!const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { // 👇️ Change text color for the clicked element only event.target.style.color = 'salmon'; });

change element text color on click

The code for this article is available on GitHub

Every time the button is clicked, its own text color gets set.

We used the target property on the event object. The target property is a reference to the object (element) on which the event was dispatched.

In other words event.target gives us access to the DOM element the user clicked.

You can console.log the target property to see the DOM element which was clicked by the user.

index.jsCopied!const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { console.log(event.target); // 👇️ Change text color for clicked element only event.target.style.color = 'salmon'; });

If you click on the button and look at your console output, you'll see the button element being logged.

# Change another element's text color on click

To change another element's text color on click:

  1. Add a click event listener to one of the elements.
  2. Each time the element is clicked, change the style.color property of the other element.

Let's add an id to the div element, so we can select it.

index.htmlCopied!<!DOCTYPE html> <html lang="en"> <head> <title>bobbyhadz.com</title> <meta charset="UTF-8" /> </head> <body> <div id="box">Some text here</div> <button id="btn">Button</button> <script src="index.js"></script> </body> </html> The code for this article is available on GitHub

And here is the related JavaScript code.

index.jsCopied!const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick(event) { const box = document.getElementById('box'); box.style.color = 'salmon'; });

change text color of another element

The code for this article is available on GitHub

Each time the button is clicked, we change the div's text color to salmon.

I've also written an article on how to change text color on mouseover.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

  • How to Change Text color on Mouseover in JavaScript
  • Add a class to the Clicked Element using JavaScript
  • Add a class to multiple Elements using JavaScript
  • Add class to a parent Element using JavaScript
  • Add event listener to all Elements with Class in JavaScript
  • Change a Style of all Elements with a specific Class in JS

Từ khóa » Html Color Text Javascript