change text color with background with Js

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.

edited yesterday

Praveen Kumar Purushothaman

131k23135181

asked yesterday

faseeh

308

add a comment |

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.

edited yesterday

Praveen Kumar Purushothaman

131k23135181

asked yesterday

faseeh

308

add a comment |

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.

edited yesterday

Praveen Kumar Purushothaman

131k23135181

asked yesterday

faseeh

308

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.

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>

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>

javascript html css

edited yesterday

Praveen Kumar Purushothaman

131k23135181

asked yesterday

faseeh

308

edited yesterday

Praveen Kumar Purushothaman

131k23135181

asked yesterday

faseeh

308

edited yesterday

Praveen Kumar Purushothaman

131k23135181

edited yesterday

Praveen Kumar Purushothaman

131k23135181

edited yesterday

Praveen Kumar Purushothaman

131k23135181

asked yesterday

faseeh

308

asked yesterday

faseeh

308

asked yesterday

faseeh

308

add a comment |

2 Answers
2

active

oldest

votes

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  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:

initial

Upon clicking, I get this:

click

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 yesterday

answered yesterday

Praveen Kumar Purushothaman

131k23135181

Comments are not for extended discussion; this conversation has been moved to chat.
– Samuel Liew♦
yesterday

add a comment |

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">✓</i>

  </div> 

</a>

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

answered yesterday

Viira

2,123423

You changed the icon?
– Praveen Kumar Purushothaman
yesterday

I changed icon's id name!
– Viira
yesterday

I meant this: ✓. :)
– Praveen Kumar Purushothaman
yesterday

1

yes it's working fine now thanks :)
– faseeh
yesterday

1

@Viira Ah okay! :)
– Praveen Kumar Purushothaman
yesterday

|
show 3 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53944292%2fchange-text-color-with-background-with-js%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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  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:

initial

Upon clicking, I get this:

click

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 yesterday

answered yesterday

Praveen Kumar Purushothaman

131k23135181

Comments are not for extended discussion; this conversation has been moved to chat.
– Samuel Liew♦
yesterday

add a comment |

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  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:

initial

Upon clicking, I get this:

click

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 yesterday

answered yesterday

Praveen Kumar Purushothaman

131k23135181

Comments are not for extended discussion; this conversation has been moved to chat.
– Samuel Liew♦
yesterday

add a comment |

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  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:

initial

Upon clicking, I get this:

click

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 yesterday

answered yesterday

Praveen Kumar Purushothaman

131k23135181

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  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:

initial

Upon clicking, I get this:

click

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>

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>

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 yesterday

answered yesterday

Praveen Kumar Purushothaman

131k23135181

edited yesterday

answered yesterday

Praveen Kumar Purushothaman

131k23135181

answered yesterday

Praveen Kumar Purushothaman

131k23135181

answered yesterday

Praveen Kumar Purushothaman

131k23135181

Comments are not for extended discussion; this conversation has been moved to chat.
– Samuel Liew♦
yesterday

add a comment |

Comments are not for extended discussion; this conversation has been moved to chat.
– Samuel Liew♦
yesterday

Comments are not for extended discussion; this conversation has been moved to chat.
– Samuel Liew♦
yesterday

add a comment |

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">✓</i>

  </div> 

</a>

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

answered yesterday

Viira

2,123423

You changed the icon?
– Praveen Kumar Purushothaman
yesterday

I changed icon's id name!
– Viira
yesterday

I meant this: ✓. :)
– Praveen Kumar Purushothaman
yesterday

1

yes it's working fine now thanks :)
– faseeh
yesterday

1

@Viira Ah okay! :)
– Praveen Kumar Purushothaman
yesterday

|
show 3 more comments

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">✓</i>

  </div> 

</a>

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

answered yesterday

Viira

2,123423

You changed the icon?
– Praveen Kumar Purushothaman
yesterday

I changed icon's id name!
– Viira
yesterday

I meant this: ✓. :)
– Praveen Kumar Purushothaman
yesterday

1

yes it's working fine now thanks :)
– faseeh
yesterday

1

@Viira Ah okay! :)
– Praveen Kumar Purushothaman
yesterday

|
show 3 more comments

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">✓</i>

  </div> 

</a>

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

answered yesterday

Viira

2,123423

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">✓</i>

  </div> 

</a>

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

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">✓</i>

  </div> 

</a>

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">✓</i>

  </div> 

</a>

answered yesterday

Viira

2,123423

answered yesterday

Viira

2,123423

answered yesterday

Viira

2,123423

answered yesterday

Viira

2,123423

You changed the icon?
– Praveen Kumar Purushothaman
yesterday

I changed icon's id name!
– Viira
yesterday

I meant this: ✓. :)
– Praveen Kumar Purushothaman
yesterday

1

yes it's working fine now thanks :)
– faseeh
yesterday

1

@Viira Ah okay! :)
– Praveen Kumar Purushothaman
yesterday

|
show 3 more comments

You changed the icon?
– Praveen Kumar Purushothaman
yesterday

I changed icon's id name!
– Viira
yesterday

I meant this: ✓. :)
– Praveen Kumar Purushothaman
yesterday

1

yes it's working fine now thanks :)
– faseeh
yesterday

1

@Viira Ah okay! :)
– Praveen Kumar Purushothaman
yesterday

You changed the icon?
– Praveen Kumar Purushothaman
yesterday

I changed icon's id name!
– Viira
yesterday

I meant this: ✓. :)
– Praveen Kumar Purushothaman
yesterday

yes it's working fine now thanks :)
– faseeh
yesterday

@Viira Ah okay! :)
– Praveen Kumar Purushothaman
yesterday

|
show 3 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk