Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Changing colors jQuery help

When i click the red, the h1, h3 will change the red, if blue, then they will chagne to blue.

Codepen

3 Answers

Paul Cox
Paul Cox
12,671 Points
Paul Cox
Paul Cox
12,671 Points

Hi,

There are a few issues with your current code. I think this is what you mean

function colorChange() {
  $("h1").add("h3").css("color", $(this).css('background-color'));
}

$(".colors-wrapper div").click(colorChange);

The first issue is the way that you determine which color was selected.

var r = $("#red").val();

You are selecting the value of the div with the id red but it doesn't have a value. You really want to get its background color with

$(this).css('background-color')

Next, the selector is incorrect to try to select the h1 and h3 elements.

$("h1 h3")...

This selects all the h3 elements that are descendants of h1 elements. In the HTML example the h1 and h3 are siblings.

Konrad Pilch
Konrad Pilch
2,435 Points

Yes, this makes the effect.

And yes :D the h1 and h3, the way i selected it, i still get confused xD im new to it and im doing lots of new porjects to get my head around jQuery.

So, what about if we have e.g. look at this site And assume that there will be a popup on what color you want to change. Red, blue, yellow, green, orange. So when you click it, every singlethe main color will change, such as hover links, hover bg, the main color to the clicked one.

WOuld i need to list all of the classes?

Oziel Perez
Oziel Perez
61,321 Points
Oziel Perez
Oziel Perez
61,321 Points

If I understood you correctly, you want to change the color of h1 and h3 to red and h2 and h4 to blue depending on what circle you click right? If so, here's how I did it:

function colorChange() {
  var color = $(this).css("background-color");
  if (color == "rgb(255, 0, 0)") {
    $("h1, h3").css("color", color);
  } else {
    $("h2, h4").css("color", color);
  }
}

$("#red, #blue").click(colorChange);

So here is my explanation for the code: I modified your colorChange function. Instead of your 2 variables you had, I just made one variable called color and I assigned the background color of "this" (which is the circle you clicked) to that variable. This allows both circles to use the same function. From here, there's many ways to assign color to the h tags, but for simplicity's sake, I just used an if statement to check the value of the color var. When I checked this in the console. color has "rgb(255, 0, 0)", which is red, after I clicked the red circle. So I check for this in the if statement and I assign h1 and h3 the color property if it's red. Otherwise, it will style h2 and h4 to blue. Finally, outside the function, I assign the function to run whenever each of the circles is clicked.

Konrad Pilch
Konrad Pilch
2,435 Points

But if i have like 10 default colors i need to add, if , else if, else woudn't be the best right? or this is just one of the way?

Im learning from this which is not finsihed yet, im doing it with Anderw, but meanwhile im trying to build osmehting what i learned right now as well, so i get to understand it properly .

Oziel Perez
Oziel Perez
61,321 Points

Another way to do it would be using a switch statement:

switch(color) {
    case "rgb (255, 0, 0)":
        $("h1, h3").css("color", color);
        break;
    case "rgb (0, 0, 255)":
        $("h2, h4").css("color", color);
        break;
}

it's still a bit of code writing, but different than if statements. It's not as simple given that you have to style different h tags. I bet there is a simpler way, but nothing comes to mind right now :|

Konrad Pilch
Konrad Pilch
2,435 Points

Thats a nice one!

Im going to finish the tutorials and then im going to have a look at this threat again. I think i need to finsih it now :D Thank you all for the answers so far :D

Tushar Singh
PLUS
Tushar Singh
Courses Plus Student 8,692 Points
Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

I am not sure what are you asking, You just want to change the color text(h1-----) when a specific color button is clicked?

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

If that's the case

$('#red').click(function() {
  $('h1, h2, h3, h4').css('color', 'red');
})
$('#blue').click(function() {
  $('h1, h2, h3, h4').css('color', 'blue');
})
Konrad Pilch
Konrad Pilch
2,435 Points

Yes, thank you. But this code repeats. Could you re-factor it please and expalin if you can?

The h1, h2 repeats, as well as the color repeats, and the value od red or blue changes, so im sure this can be made as a method.

Im jsut trying to learn how andrew does it, but yeah :D

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

I placed all your headings in a div with id="color"

function colorChange() {
  $('#color').children().css("color", $(this).css('background-color'));
}

$(".circle").click(colorChange);