Enable a button or class to dynamically alter its color

Question

Enable a button or class to dynamically alter its color

Hi there! I'm new to coding and just started learning HTML and CSS. My question is: How can I change the color of buttons once they are clicked?

<div class="icon-bar">
  <a href="#"><i class="fa fa-search" onclick="myFunction()"></i></a> 
  <a href="#"><i class="fa fa-envelope"></i></a> 
  <a href="#"><i class="fa fa-globe"></i></a>
</div>

I've attempted to use an onclick event, but it didn't have the desired effect. This is the function I tried:

<script>
function myFunction() {
    document.getElementById("fa fa-search").style.color = "red";
}
</script>

Below is the complete code:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0}

.icon-bar {
    margin-top: 20%;
    margin-left: 0.2%;
    width: 90px;
    background-color: rgba(85, 85, 85, 0.85);;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}

.icon-bar a:hover {
  background-color: rgba(0, 140, 255, 0.5);
}

.active {
  background-color: rgba(0, 140, 255, 1);
}
</style>
<body>

<div class="icon-bar">
  <a href="#"><i class="fa fa-search" onclick="myFunction()"></i></a> 
  <a href="#"><i class="fa fa-envelope"></i></a> 
  <a href="#"><i class="fa fa-globe"></i></a>
</div>

<script>
function myFunction() {
    document.getElementById("fa fa-search").style.color = "red";
}
</script>

</body>
</html>

javascript html css

Answer 1

Answer №1

Avoid using inline JavaScript handlers like on*="", just as you avoid inline style="" attributes. Keep your JavaScript in one central location, such as a script tag or file.
Utilize Element.addEventListener()
Retrieve desired elements using .querySelectorAll()
Loop through elements using NodeList.prototype.forEach()
Employ the methods of Element.classList like .add() and .remove().
Enhance CSS specificity by using selectors like .icon-bar a.active to override styles on hover.

const ELS_barItems = document.querySelectorAll(".icon-bar a");

function makeActive(ev) {
  ev.preventDefault(); // prevent browser action on Anchors
  ELS_barItems.forEach(el => el.classList.remove("active"));
  ev.currentTarget.classList.add("active");
}

ELS_barItems.forEach(el => el.addEventListener("click", makeActive));

body {margin:0}

.icon-bar {
    margin-top: 20%;
    margin-left: 0.2%;
    width: 90px;
    background-color: rgba(85, 85, 85, 0.85);;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}

.icon-bar a:hover {
  background-color: rgba(0, 140, 255, 0.5);
}

.icon-bar a.active {
  background-color: rgba(0, 140, 255, 1);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="icon-bar">
  <a href="#"><i class="fa fa-search"></i></a> 
  <a href="#"><i class="fa fa-envelope"></i></a> 
  <a href="#"><i class="fa fa-globe"></i></a>
</div>

Answer 2

Avoid using inline JavaScript handlers like on*="", just as you avoid inline style="" attributes. Keep your JavaScript in one central location, such as a script tag or file.
Utilize Element.addEventListener()
Retrieve desired elements using .querySelectorAll()
Loop through elements using NodeList.prototype.forEach()
Employ the methods of Element.classList like .add() and .remove().
Enhance CSS specificity by using selectors like .icon-bar a.active to override styles on hover.

const ELS_barItems = document.querySelectorAll(".icon-bar a");

function makeActive(ev) {
  ev.preventDefault(); // prevent browser action on Anchors
  ELS_barItems.forEach(el => el.classList.remove("active"));
  ev.currentTarget.classList.add("active");
}

ELS_barItems.forEach(el => el.addEventListener("click", makeActive));

body {margin:0}

.icon-bar {
    margin-top: 20%;
    margin-left: 0.2%;
    width: 90px;
    background-color: rgba(85, 85, 85, 0.85);;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}

.icon-bar a:hover {
  background-color: rgba(0, 140, 255, 0.5);
}

.icon-bar a.active {
  background-color: rgba(0, 140, 255, 1);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="icon-bar">
  <a href="#"><i class="fa fa-search"></i></a> 
  <a href="#"><i class="fa fa-envelope"></i></a> 
  <a href="#"><i class="fa fa-globe"></i></a>
</div>

Answer 3

Answer №2

If you want to change the background color of an element when clicking a button, simply pass the element reference to your function like this:

<button onclick="makeBackgroundRed(this)">click</button>

Here's how your JavaScript function would look:

makeBackgroundRed = function(element){
  element.style.background = 'red'
}

The issue in your code is that you are using

getElementById("fa fa-search")

but providing a class instead of an ID. You could switch to using getElementsByClassName, but keep in mind that every element with that class will be affected.

Answer 4

If you want to change the background color of an element when clicking a button, simply pass the element reference to your function like this:

<button onclick="makeBackgroundRed(this)">click</button>

Here's how your JavaScript function would look:

makeBackgroundRed = function(element){
  element.style.background = 'red'
}

The issue in your code is that you are using

getElementById("fa fa-search")

but providing a class instead of an ID. You could switch to using getElementsByClassName, but keep in mind that every element with that class will be affected.

Enable a button or class to dynamically alter its color

Answer №1

Answer №2

Similar questions

Finding the x and y coordinates of a rotated 3D cube using JavaScript

How can I use jQuery to access the parent node in an XML document?

Guide on sending files and data simultaneously from Angular to .NET Core

JavaScript failing to retrieve JSON information from PHP

Navigate to a different HTML file following a JavaScript function in Ionic and AngularJS with Cordova

Vertical scroll bar positioned on the left side of a DIV

Adding a fresh HTML element to a list at a designated location

Forward to a SubDomain

How do you unfocus a React Native TextInput when a button is clicked?

In Production environment, v-model triggers a ReferenceError

How can you implement a bootstrap navigation bar in a vue.js project?

Unable to find / DELETE Express.js

Ways to avoid submitting based on the outcome of AJAX requests

Dragging and dropping an HTML canvas element causes its width and height to be reset to zero

Changing the height of one Div based on another Div's height

I'm working with Angular 12, Bootstrap 5, and ngPrime, and I'm looking to overlap a p-dialog with another element in my project

Error: The script is not found in the package.json configuration

What is the significance of the term "Object object"?

A Step-by-Step Guide on Sending Response to ajaxError Callback in Perl

Adjust the stacking order of bars in a vertical chart and exclude negative values with Vega-Lite