Trying to change properties of another element within .click() function

Question

I want to change the text color of an element when I click a button using jQuery. This code is not working, please help!

$(document).ready(function() {
  $("p").click(function() {
    $(this).hide();
  });
  $("button").click(function() {
    $("#colorChange").style.color = "blue";
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="colorChange">I should(?) change color when you click mr. button</p>
<button>clickme</button>

api.jquery.com/css Use the correct functions. jQuery does not directly expose attributes/properties of dom elements. — Taplar
– Taplar, Commented Nov 20, 2018 at 17:49
Alternatively you could get the raw dom element with $("#colorChange")[0] and your property access would work fine. — Taplar
– Taplar, Commented Nov 20, 2018 at 17:57

New Developer · Accepted Answer · 2018-11-20 17:51:19Z

1

hope this help

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
    $("button").click(function(){
       $("#colorChange").css("color","blue"); 
    });
});
</script>
</head>
<body>

<p id="colorChange">I should(?) change color when you click mr. button</p>
<button>clickme</button>

</body>
</html>

answered Nov 20, 2018 at 17:51

New Developer

762 bronze badges

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

2 Comments

Taplar Over a year ago

Explain what the issue is and how you fixed it. Don't just post code.

Kevin Lutz Over a year ago

@AboAlimk thank you, as you can tell im new to jQuery and didnt realize you cant use plain javascript methods with jQuery selectors

Mrigank · Accepted Answer · 2018-11-20 17:52:41Z

0

Try using $("#colorChange").css("color", "blue") instead of $("#colorChange").style.color = "blue".

For more info, visit: https://api.jquery.com/css

answered Nov 20, 2018 at 17:52

Mrigank

1511 silver badge9 bronze badges

Comments

Romen · Accepted Answer · 2018-11-20 17:58:54Z

0

The problem is this line:

$("#colorChange").style.color = "blue";

It should look like this:

$("#colorChange")[0].style.color = "blue";

This is because the object returned from $("#colorChange") is a jQuery Object. The style property you wish to change is a member of a DOM Element, which can be retrieved from the jQuery Object with an array index or the get() method.

answered Nov 20, 2018 at 17:58

Romen

1,7841 gold badge13 silver badges29 bronze badges

Comments

Wayne Phipps · Accepted Answer · 2018-11-20 19:33:27Z

0

Please try this,

$("button").click(function(){
     $("#colorChange").css("color","blue"); 
});

this one also works fine,

$("button").click(function(){
     $("#colorChange")[0].style.color= 'blue'; 
});

edited Nov 20, 2018 at 19:33

Wayne Phipps

2,1096 gold badges26 silver badges32 bronze badges

answered Nov 20, 2018 at 18:14

Mahesh Shenoi

11 bronze badge

Collectives™ on Stack Overflow

Trying to change properties of another element within .click() function

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related