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.
javascript html css
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.
javascript html css
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.
javascript html css
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
javascript html css
edited yesterday
Praveen Kumar Purushothaman
131k23135181
131k23135181
asked yesterday
faseeh
308
308
add a comment |
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 <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>
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
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
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 <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>
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 <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>
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 <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>
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>
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
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
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
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
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
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
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
You changed the icon?
– Praveen Kumar Purushothaman
yesterday
I changed icon's id name!
– Viira
yesterday
I changed icon's id name!
– Viira
yesterday
I meant this:
✓
. :)
– Praveen Kumar Purushothaman
yesterday
I meant this:
✓
. :)
– Praveen Kumar Purushothaman
yesterday
1
1
yes it's working fine now thanks :)
– faseeh
yesterday
yes it's working fine now thanks :)
– faseeh
yesterday
1
1
@Viira Ah okay!
:)
– Praveen Kumar Purushothaman
yesterday
@Viira Ah okay!
:)
– Praveen Kumar Purushothaman
yesterday
|
show 3 more comments
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown