CODEWITHSUNDEEP
jqueryhtmlcss
Pawan Kumar
Pawan Kumar

Reputation: 97

jquery code is not running

i want to change the color of my div1 after clicking it.

when I click div1 it must change its background color to #4A6B4C but that's not happening. kindly help. thanks 

$(document).ready(function()
{
    
 $('#div1').click(function()
 {
   $('#div1').toggleClass('change'); 
  });  
   });
    
   
#div1{ background-color:#33C43C;width:40px;height:40px;
border-radius:50%;color:white;text-align:center;font-size:30px;}
#div2{text-align:center; color:white;background-color:#33C43C;width:40px;height:40px;border-radius:50%;font-size:30px;}
#div1:hover{cursor:pointer;background-color:#4A6B4C;}
#div2:hover{cursor:pointer;background-color:#4A6B4C;}
.change{background-color:#4A6B4C;} /* div1 must change to this color */
<div id="div1" class="op1">
S
</div>
<br><br>
<div id="div2" class="op">
M
</div>

Upvotes: 2

Views: 47

Answers (3)

Frank Wisniewski
Frank Wisniewski

Reputation: 1224

Your JS Code is correct. A good practice is never using id´s in css, because an id is always unique and the css for this id´s is not reusable. I have changed your code from id´s to classes. 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    .divclass{ 
      background-color:#33C43C;
      width:40px;
      height:40px;
      border-radius:50%;
      color:white;text-align:
      center;font-size:30px;
    }
    .hoverclass:hover{
       cursor:pointer;
       background-color:#4A6B4C;
    }
    .change{
      background-color:#4A6B4C;
    } 
  </style>
</head>
<body>
  <div id="div1" class="op1 divclass hoverclass">
    S
  </div>
  <br><br>
  <div id="div2" class="op divclass hoverclass">
    M
  </div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>    
    $(document).ready(function(){
      $('#div1').click(function(){
        $('#div1').toggleClass('change'); 
      });  
    });
  </script>
</body>
</html>

Upvotes: 0

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

Use .on to bind the events.

Also see the change I have done in CSS. Your style needs to be more specific.

$(document).ready(function() {

  $('#div1').on("click", function() {
    $(this).toggleClass('change');
  });
});
#div1 {
  background-color: #33C43C;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  text-align: center;
  font-size: 30px;
}

#div2 {
  text-align: center;
  color: white;
  background-color: #33C43C;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 30px;
}

#div1:hover {
  cursor: pointer;
  background-color: #4A6B4C;
}

#div2:hover {
  cursor: pointer;
  background-color: #4A6B4C;
}

#div1.op1.change {
  background-color: #4A6B4C;
}


/* div1 must change to this color */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="op1">
  S
</div>
<br><br>
<div id="div2" class="op">
  M
</div>

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115212

Update the selector with id or use !important with the style value since style with id has the higher priority.

#div1.change{
   background-color:#4A6B4C;
}


$(document).ready(function() {
  $('#div1').click(function() {
    $('#div1').toggleClass('change');
  });
});
#div1 {
  background-color: #33C43C;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  text-align: center;
  font-size: 30px;
}

#div2 {
  text-align: center;
  color: white;
  background-color: #33C43C;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 30px;
}

#div1:hover {
  cursor: pointer;
  background-color: #4A6B4C;
}

#div2:hover {
  cursor: pointer;
  background-color: #4A6B4C;
}

#div1.change {
  background-color: #4A6B4C;
}


/* div1 must change to this color */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="op1">
  S
</div>
<br><br>
<div id="div2" class="op">
  M
</div>

.change{
   background-color:#4A6B4C !important;
}


$(document).ready(function() {
  $('#div1').click(function() {
    $('#div1').toggleClass('change');
  });
});
#div1 {
  background-color: #33C43C;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  text-align: center;
  font-size: 30px;
}

#div2 {
  text-align: center;
  color: white;
  background-color: #33C43C;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 30px;
}

#div1:hover {
  cursor: pointer;
  background-color: #4A6B4C;
}

#div2:hover {
  cursor: pointer;
  background-color: #4A6B4C;
}

.change {
  background-color: #4A6B4C !important;
}


/* div1 must change to this color */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="op1">
  S
</div>
<br><br>
<div id="div2" class="op">
  M
</div>

Upvotes: 2

Related Questions