change text color with background with Js

Question

I'm creating thumbs up button with anchor tag when the user click on it, it background and font color change but the problem is it is changing the background color but not the font color:

function changeColor() {
  document.getElementById('icon').style.color = "#fff"; // forecolor
  document.getElementById('icon').style.background = "#008000"; // backcolor
}

.thumb-up {
  border: 5px solid green;
  width: 42%;
  padding: 30px 6px 34px 32px;
  border-radius: 100%;
}

<a onclick="changeColor()" href="#">
  <div id="icon" class="thumb-up">
    <i id="icon" class="fas fa-thumbs-up fa-5x"></i>
  </div>
</a>

Problem: I want to change text and background color on click.

Praveen Kumar Purushothaman · Accepted Answer · 2018-12-27 11:43:26Z

4

You have id="icon" twice, this is a crime in HTML and that's the reason it doesn't work. Change it to class or give different values for id.

<div id="icon" class="thumb-up">
  <i id="icon" class="fas fa-thumbs-up fa-5x"></i>
  <!--^^^^^^^^ -->
</div>

In this case, you may as well remove the id="icon" from <i> tag. Also, there are CSS based solutions for this, if you are up for it. They are more effective.

Clarification from OP

I used the following code. Also, you should not use fas and I changed to fa. I get this initially:

Upon clicking, I get this:

This is the full code I used:

function changeColor() {
  document.getElementById('icon').style.color = "#fff"; // forecolor
  document.getElementById('icon').style.background = "#008000"; // backcolor
}

.thumb-up {
  border: 5px solid green;
  width: 42%;
  padding: 30px 6px 34px 32px;
  border-radius: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<a onclick="changeColor()" href="#">
  <div id="icon" class="thumb-up">
    <i class="fa fa-thumbs-up fa-5x"></i>
  </div>
</a>

edited Dec 27, 2018 at 11:43

answered Dec 27, 2018 at 11:27

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

samliew Over a year ago

Comments are not for extended discussion; this conversation has been moved to chat.

Viira · Accepted Answer · 2018-12-27 11:39:47Z

3

Don't use same id names. Id names should be unique.

Your code is working fine here with changes.

function changeColor() {
  document.getElementById('icons').style.color = "#fff"; // forecolor
  document.getElementById('icon').style.background = "#008000"; // backcolor
}

.thumb-up {
  border: 5px solid green;
  width: 42%;
  padding: 30px 6px 34px 32px;
  border-radius: 100%;
  text-align: center;
}

<a onclick="changeColor()" href="#">
  <div id="icon" class="thumb-up">
    <i id="icons" class="fas fa-thumbs-up fa-5x">&#x2713;</i>
  </div> 
</a>

I've changed the id name for fa-icon to icons so that it will be an unique name

answered Dec 27, 2018 at 11:39

Viira

4,0163 gold badges21 silver badges41 bronze badges

7 Comments

Praveen Kumar Purushothaman Over a year ago

You changed the icon?

Viira Over a year ago

I changed icon's id name!

Praveen Kumar Purushothaman Over a year ago

I meant this: ✓. :)

Viira Over a year ago

I didn't import font-awesome css here so I used unicode for that. :)

Praveen Kumar Purushothaman Over a year ago

@Viira Ah okay! :)

|

Collectives™ on Stack Overflow

change text color with background with Js

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related