change text color with background with Js












0














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.










share|improve this question





























    0














    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.










    share|improve this question



























      0












      0








      0







      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.










      share|improve this 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.






      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited yesterday









      Praveen Kumar Purushothaman

      131k23135181




      131k23135181










      asked yesterday









      faseeh

      308




      308
























          2 Answers
          2






          active

          oldest

          votes


















          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:



          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>








          share|improve this answer























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



















          4














          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






          share|improve this answer





















          • 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











          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


















          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









          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:



          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>








          share|improve this answer























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
















          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:



          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>








          share|improve this answer























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














          4












          4








          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:



          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>








          share|improve this answer














          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:



          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>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          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


















          • 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













          4














          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






          share|improve this answer





















          • 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
















          4














          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






          share|improve this answer





















          • 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














          4












          4








          4






          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






          share|improve this answer












          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>






          share|improve this answer












          share|improve this answer



          share|improve this answer










          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


















          • 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


















          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














          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





















































          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







          Popular posts from this blog

          Monofisismo

          Angular Downloading a file using contenturl with Basic Authentication

          Olmecas