jQuery id selector issue: not selecting elements properly

Question

jQuery id selector issue: not selecting elements properly

It seems like I am overlooking a very fundamental aspect here.

Essentially, there are 2 div elements in the HTML markup. When one is clicked (#x), the other div element (#block1) gains a new class (.change), resulting in a change in its color.

The issue lies within the selector ("#block1") used inside the click function. Substituting the id of the first div with a class works perfectly fine. However, using an id instead renders it invalid.

$(document).ready(function() {
  $("#x").click(function() {
    $("#block1").toggleClass("change");
  });
});

#block1 {
  width: 20vw;
  height: 20vw;
  background: gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x {
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
}

.change {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="block1"></div>
<div id="x"></div>

jquery html css click

Answer 1

Answer №1

If you want to override the background color specified in #block1, make sure to include #block1 along with your .change declaration. Hopefully, this is the solution you were searching for.

   $("#x").click(function(){
     $("#block1").toggleClass("change");
   });

#block1{
  width: 20vw;
  height:20vw;
  background:gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x{
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
    }

#block1.change {
  background: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1">
   </div>

   <div id ="x">
   </div>

Answer 2

If you want to override the background color specified in #block1, make sure to include #block1 along with your .change declaration. Hopefully, this is the solution you were searching for.

   $("#x").click(function(){
     $("#block1").toggleClass("change");
   });

#block1{
  width: 20vw;
  height:20vw;
  background:gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x{
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
    }

#block1.change {
  background: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1">
   </div>

   <div id ="x">
   </div>

Answer 3

Answer №2

The background color set in #block1 cannot be overridden by your CSS class, .change, due to style precedence.

To make it work in this case, you need to be more specific.

Instead of:

.change {
    background: red;
}

You should use:

#block1.change {
    background: red;
}

Answer 4

The background color set in #block1 cannot be overridden by your CSS class, .change, due to style precedence.

To make it work in this case, you need to be more specific.

Instead of:

.change {
    background: red;
}

You should use:

#block1.change {
    background: red;
}

Answer 5

Answer №3

To ensure your CSS overrides the gold color, make sure to include the !important declaration:

.change {
  background: red !important;
}

Your updated code should look like this:

$(document).ready(function() {
  $("#x").click(function() {
    $("#block1").toggleClass("change");
  });
});

#block1 {
  width: 20vw;
  height: 20vw;
  background: gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x {
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
}

.change {
  background: red !important;
}

<body>
  <div id="block1">
  </div>

  <div id="x">
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">


  </script>
</body>

Answer 6

To ensure your CSS overrides the gold color, make sure to include the !important declaration:

.change {
  background: red !important;
}

Your updated code should look like this:

$(document).ready(function() {
  $("#x").click(function() {
    $("#block1").toggleClass("change");
  });
});

#block1 {
  width: 20vw;
  height: 20vw;
  background: gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x {
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
}

.change {
  background: red !important;
}

<body>
  <div id="block1">
  </div>

  <div id="x">
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">


  </script>
</body>

Answer 7

Answer №4

$(document).ready(function(){
   $("#x").click(function(){
     $("#block1").toggleClass("change");
   });
});

 

#block1{
  width: 20vw;
  height:20vw;
  background:gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x{
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
    }

#block1.change {
  background: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1">
   </div>

   <div id ="x">
   </div>

The styling for #block1 takes precedence and overrides the style of the .change class. Update your CSS to this:

 #block1.change {
     background: red;
    }

For more information on CSS specificity, visit https://developer.mozilla.org/en/docs/Web/CSS/Specificity

Answer 8

$(document).ready(function(){
   $("#x").click(function(){
     $("#block1").toggleClass("change");
   });
});

 

#block1{
  width: 20vw;
  height:20vw;
  background:gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x{
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
    }

#block1.change {
  background: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1">
   </div>

   <div id ="x">
   </div>

The styling for #block1 takes precedence and overrides the style of the .change class. Update your CSS to this:

 #block1.change {
     background: red;
    }

For more information on CSS specificity, visit https://developer.mozilla.org/en/docs/Web/CSS/Specificity

Answer 9

Answer №5

Feel free to utilize this code and be sure to carefully study the CSS properties.

<!DOCTYPE html>
<html>
<head>
  <title>ok</title>
  <script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#block1{
  width: 20vw;
  height:20vw;
  background:gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x{
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;

    }

#block1.change {
  background: red;
  }
</style>

</head>
<body>
<div id="x">
  asa
</div>
<div id="block1">
  aasds
</div>
<script type="text/javascript">
  $( document ).ready(function() {

    $( "#x").click(function() {

        $("#block1").toggleClass("change");

    });

});
</script>

</body>
</html>

Answer 10

Feel free to utilize this code and be sure to carefully study the CSS properties.

<!DOCTYPE html>
<html>
<head>
  <title>ok</title>
  <script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#block1{
  width: 20vw;
  height:20vw;
  background:gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x{
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;

    }

#block1.change {
  background: red;
  }
</style>

</head>
<body>
<div id="x">
  asa
</div>
<div id="block1">
  aasds
</div>
<script type="text/javascript">
  $( document ).ready(function() {

    $( "#x").click(function() {

        $("#block1").toggleClass("change");

    });

});
</script>

</body>
</html>

Answer 11

Answer №6

It is not advisable to add a red background to the specific id selector #block1.change. If you intend to apply the change class to multiple elements, it would be better to override the background property in the .change class using !important (since the css #block1 already has a background:gold) like so:

.change {
    background: red !important;
}

Snippet,

$(function() {
  $("#x").click(function() {
    $("#block1").toggleClass("change");
  });
});

#block1 {
  width: 20vw;
  height: 20vw;
  background: gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x {
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
}

.change {
  background: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1">
</div>

<div id="x">
</div>

Answer 12

It is not advisable to add a red background to the specific id selector #block1.change. If you intend to apply the change class to multiple elements, it would be better to override the background property in the .change class using !important (since the css #block1 already has a background:gold) like so:

.change {
    background: red !important;
}

Snippet,

$(function() {
  $("#x").click(function() {
    $("#block1").toggleClass("change");
  });
});

#block1 {
  width: 20vw;
  height: 20vw;
  background: gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x {
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
}

.change {
  background: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1">
</div>

<div id="x">
</div>

jQuery id selector issue: not selecting elements properly

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Make dark mode the default setting in your Next JS application

Enhancing this testimonial slider with captivating animations

Input field with JQuery datepicker showing only months and years

Loading options dynamically in a dropdown list using KnockoutJS

Manipulate the value of the <input> element when focused through JavaScript

The padding on this button seems to be arbitrary and nonsensical

How to insert space after every item generated by ng-repeat in AngularJS

Error message: Injector Error: R3InjectorError(Standalone[_AppComponent])[_WebService -> _WebService -> _WebService] occurred

Tips on extracting code differences from code inspector

Achieve the effect of making the Bootstrap JS Collapse text bold after it has been

Material design for Angular applications - Angular Material is

How can I use jQuery to add styling to my menu options?

The Bootstrap carousel comes with a brilliant feature! Conceal those 'previous' and 'next' buttons when you reach the first and last slide. However, it seems like the 'slide' event is not functioning as

Utilizing custom links for AJAX to showcase targeted pages: a beginner's guide

Expand the div width to the specified measurement horizontally

Spinning html/css content using JavaScript

Tips for Utilizing PHP Without the Need to Refresh the Page

What could be the reason for scrapy not returning any URLs?

How can you make a dropdown button interactive and display a list simultaneously?

Jquery script that utilizes the Steam WebAPI to return data