jQuery .css() won’t set the CSS

Question

For some reason when I use jQuery .css() it won’t change my CSS. I've checked it through several times, and the syntax seems to be right.

I can see that it is running the operation, so the only thing that does not work is the CSS line:

jQuery:

var document = this;

jQuery(document).ready(function($){
    console.log("document ready");


jQuery("#buttonrow .button").click(function(){
    var $this = $(this);

    console.log("button clicked");
    if($this.attr("id") == 'redbutton'){
        console.log("red");
        $('#redCheckDiv').css('display', 'block');
    } else {
        console.log("blue");
        $('#blueCheckDiv').css('display', 'block');
    }
});

});

HTML

<div class="row" id="buttonrow">
    <div class="col-md-5 col-md-offset-1 button" id="bluebutton">
    <div class="blueCheckDiv"></div>
        <div class="col-md-10 col-md-offset-1 text-center" id="text-container">
            <p>This is the blue box</p>
        </div>
    </div>
    <div class="col-md-5 button" id="redbutton">
    <div class="redCheckDiv"></div>
        <div class="col-md-10 col-md-offset-1 text-center" id="text-container">
            <p>this is the red box</p>
        </div>
    </div>
</div>

You are using # id selector, but in your html code attribute is class, so, use class selector., e.g. : $('.redCheckDiv')... — sinisake
– sinisake, Commented Nov 19, 2016 at 11:16
Lol yea, i'm using id selector... Haha, sorry for not realising that before posting. — Jonas Mohr Pedersen
– Jonas Mohr Pedersen, Commented Nov 19, 2016 at 11:18

Nagendra · Accepted Answer · 2016-11-19 11:22:23Z

6

So here in your html, You have created redcheckdiv and bluecheckdiv as class not as id. So you haveto use dot instead of # . Below is the answer.

var document = this;

jQuery(document).ready(function($){
    console.log("document ready");


  jQuery("#buttonrow .button").click(function(){
    var $this = $(this);

    console.log("button clicked");
    if($this.attr("id") == 'redbutton'){
        console.log("red");
        $('.redCheckDiv').css('display', 'block');
    } else {
        console.log("blue");
        $('.blueCheckDiv').css('display', 'block');
    }
  });

});

edited Nov 19, 2016 at 11:22

answered Nov 19, 2016 at 11:18

Nagendra

763 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

As you already know, your selector was invalid, because you selected on an ID, but a class was defined in your markup. This can be easy to do, and hard to spot, even for experienced JavaScript developers.

Avoiding pain associated with bad selectors

To debug this sort of issue, use the debugger console. Enter the selector(s) for the problematic area of your code, and hit enter:

$('#blueCheckDiv')

If you get this result, the selector does not exist on the page.

j…y.fn.init {context: document, selector: "#blueCheckDiv"}

If your markup exists before your JavaScript does, you may find it’s easiest to build your selectors this way. Enter them into he console to test them, before even adding them to your JavaScript code.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 19, 2016 at 11:27

Tim Grant

3,4664 gold badges25 silver badges31 bronze badges

Comments

Muruga · Accepted Answer · 2016-11-19 11:28:55Z

0

Use the below code it's working perfectly ( Change Id to class )

<script type="text/javascript">
$(document).ready(function() {
    $("#buttonrow .button").click(function() {

        var click_id = $(this).attr("id");

        if (click_id == 'redbutton') {
            console.log("red");
            $('.redCheckDiv').css('display', 'block');
        } else {
            console.log("blue");
            $('.blueCheckDiv').css('display', 'block');
        }
    });

});
</script>

answered Nov 19, 2016 at 11:28

Muruga

1441 gold badge1 silver badge6 bronze badges

Comments

FlipFloop · Accepted Answer · 2016-11-19 14:24:34Z

You entered 2 div's with classes in the HTML, but you marked them as id's in the jQuery, here is the correct code:

$(document).ready(function() {
    $("#buttonrow .button").click(function() {

        var click_id = $(this).attr("id");

        if (click_id == 'redbutton') {
            console.log("red");
            $('.redCheckDiv').css('display', 'block');
        } else {
            console.log("blue");
            $('.blueCheckDiv').css('display', 'block');
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="buttonrow">
    <div class="col-md-5 col-md-offset-1 button" id="bluebutton">
    <div class="blueCheckDiv"></div>
        <div class="col-md-10 col-md-offset-1 text-center" id="text-container">
            <p>This is the blue box</p>
        </div>
    </div>
    <div class="col-md-5 button" id="redbutton">
    <div class="redCheckDiv"></div>
        <div class="col-md-10 col-md-offset-1 text-center" id="text-container">
            <p>this is the red box</p>
        </div>
    </div>
</div>

Hope this helps!

Collectives™ on Stack Overflow

jQuery .css() won’t set the CSS

4 Answers 4

Comments

Avoiding pain associated with bad selectors

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Avoiding pain associated with bad selectors

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related