Changing dynamically the color of an Awesome Icon

Question

I want to change the colour of an Awesome Icon, and I created this piece of code, but instead of giving me the colour, I got an 'undefined'

<script type="text/javascript">
function changeAIColor(idName) {
    alert ($('idAwesomeIcon').css("color"));
}
</script>

<a href="#" th:onclick="'changeIconColor();'">
    <span th:if="${#lists.contains(userMenus, menu)}">
        <i id="idAwesomeIcon" class="fa fa-toggle-on fa-lg"   style="color:#009900; text-align: center;" aria-hidden="true"></i>
    </span>
    <span th:if="${!#lists.contains(userMenus, menu)}">
        <i d="idAwesomeIcon" class="fa fa-toggle-off fa-lg"  style="color:#e6e6e6;" aria-hidden="true"></i>
    </span>
</a>

Answer 1

You have missed the id selector # in your JQuery. Also use idName of the changeAIColor function in your selector. So, the query becomes ($('#'+idName).css("color") . Please note that you have used same id as idAwesomeIcon multiple times. id values should be used uniquely in HTML page.

 function changeAIColor(idName) { alert ($('#'+idName).css("color")); } changeAIColor('idAwesomeIcon'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" th:onclick="'changeIconColor();'"> <span th:if="${#lists.contains(userMenus, menu)}"> <i id="idAwesomeIcon" class="fa fa-toggle-on fa-lg" style="color:#009900; text-align: center;" aria-hidden="true"></i> </span> <span th:if="${!#lists.contains(userMenus, menu)}"> <i id="idAwesomeIcon" class="fa fa-toggle-off fa-lg" style="color:#e6e6e6;" aria-hidden="true"></i> </span> </a> 

Answer 2

You need $('#idAwesomeIcon').css("color")

Also <id="idAwesomeIcon" isn't right. The ID should be different and should actually be id="" .

Answer 3

<script type="text/javascript">
    $('.AwesomeIcon').each(function(){
      alert ($(this).css("color"));
    });
</script>

<a href="#" th:onclick="'changeIconColor();'">
    <span th:if="${#lists.contains(userMenus, menu)}">
        <i class="fa fa-toggle-on fa-lg AwesomeIcon"   style="color:#009900; text-align: center;" aria-hidden="true"></i>
    </span>
    <span th:if="${!#lists.contains(userMenus, menu)}">
        <i  class="fa fa-toggle-off fa-lg AwesomeIcon"  style="color:#e6e6e6;" aria-hidden="true"></i>
    </span>
</a>

Change your ID to class and change your JS accordingly.