Jquery onclick event icon color is not changing

Question

for example here i have three icon (fa fa-heart),Normally icon color is green, My requirement is,if icon 2 is clicked, the background color should change red using an onclick event. suppose again i am clicking same icon 2 means background color should change in green, after that i am clicking icon 3 means background color should change red, I have tried but I am not able to do this. i am getting answer like this, If I click icon 2, icon 1 color is changing. If I click icon 3 , icon 1 color is changing. like every time icon 1 is changing color

<div class = "col-md-8 top-a rentListing"> </div>

 function searchLocality() {

   var city = "something";
   var locality = "something";

   $.ajax({
     type: "POST",
     data: {
       city: city,
       locality: locality
     },
     url: "rentlocalityFilter.php",
     success: function(data) {

       var htmlString = '';
       $.each(res['data'], function(key, value) {
         var id = value.id;
         htmlString += '<a class="col-md-1 icon" style="margin-top:10px;cursor:pointer" onclick="guesttt_login()"><i class="fa fa-heart" aria-hidden="true" style="margin-top: -11px; color: green;" id="button" onclick="setColor(' + value.id + ')"></i></a>';

       });
       $('.rentListing').empty().append(htmlString);

     }

   });

 }
 var count = 1;

 function setColor(id) {
   var btn = 'button';
   var color = '#101010';

   var property = document.getElementById(btn);
   if (count == 0) {
     property.style.backgroundColor = "green"
     count = 1;
   } else {
     property.style.backgroundColor = "red"
     count = 0;
   }
 }

Hello, so if I get it right, you want to toggle the color (between red and green) right? — Sletheren, Aug 31 '17 at 10:14
Yes,while clicking the icon , icon color is green means i have to do some stuff, suppose red color i have to do some stuff — , Aug 31 '17 at 10:17
Look this answer https://stackoverflow.com/a/7002053/6221327 — Keutelvocht, Aug 31 '17 at 10:18

score 1 · Answer 1 · answered Aug 31 '17 at 10:15

1

$('.fa-heart').on('click',function(){
    $(this).toggleClass('redBackground');
});

Each time you click a heart the class will be toggled - if it is present it will be removed.

This can be further developed into

$(this).toggleClass('redBackground greenBackground');

css:

.redBackground{background-color:red}

answered Aug 31 '17 at 10:15

Stender

2,446
1
14
22

Mr @Stender, Mainthing i need to onclick event only,what you did now i don't want like that – Aug 31 '17 at 10:19
well, this is an onclick event, that is changing the color of the icon that you clicked? – Stender Aug 31 '17 at 10:20

Yogesh · Answer 2 · 2017-08-31T10:33:38.110

Please find updated code , In your code you are using static id of button so it will update that only.

You have to pass id of actually clicked icon to javascript function and function should store that for that icon its is clicked first time or clicked previously. That needs to be saved in javascript

Note: Code is not tested its just providing you logic how to implement it

     <div class = "col-md-8 top-a rentListing"> </div>

         function searchLocality() {

       var city = "something";
       var locality = "something";

       $.ajax({
           type: "POST",
           data: {
               city: city,
               locality: locality
           },
           url: "rentlocalityFilter.php",
           success: function(data) {

               var htmlString = '';
               $.each(res['data'], function(key, value) {
                   var id = value.id;
                   htmlString += '<a class="col-md-1 icon" style="margin-top:10px;cursor:pointer" onclick="guesttt_login()"><i class="fa fa-heart" aria-hidden="true" style="margin-top: -11px; color: green;" id="' + value.id + '" onclick="setColor(' + value.id + ')"></i></a>';

               });
               $('.rentListing').empty().append(htmlString);

           }

       });

   }
   var count = 1;

   var objCount = {};

   function setColor(id) {
       var btn = id;
       var color = '#101010';
       if (objCount && objCount[id] != undefined) {
           if (objCount[id] == 0) {
               objCount[id] = 1;
           } else {
               objCount[id] = 0;
           }
       } else {
           objCount[id] = 1;
       }


       var property = document.getElementById(btn);
       if (objCount[id] == 0) {
           property.style.backgroundColor = "green"
           objCount[id] = 1;
       } else {
           property.style.backgroundColor = "red"
           objCount[id] = 0;
       }
   }

Uncaught TypeError: Cannot read property 'style' of null, i tried your code but not getting answer — , Aug 31 '17 at 10:42
could you please share actual html gettting from ajax request in this line > htmlString += ''; — Yogesh, Aug 31 '17 at 10:58
If i am clicking icon two background color (red) is changing,suppose same icon 2 again clicking background color green is not happening,can you please check @Yogesh — , Aug 31 '17 at 11:18
Let me create fiddle for you with sample html and your javascript code — Yogesh, Aug 31 '17 at 12:25

Jquery onclick event icon color is not changing

2 Answers2